When integrating React-based pages from an OA system into a DingTalk mini application, a common issue arises where page titles fail to display. The standard document.title method is effective in web browsers but does not function within the DingTalk environment.

Root Cause DingTalk mini applications run within a container that imposes restrictions on the standard Web API. Consequently, document.title is ignored. The container requires the use of DingTalk's proprietary JavaScript API to manipulate UI elements such as the navigation bar title.

Implementation Steps

1. Dynamically Load the DingTalk JSAPI Library Instead of including the script in the HTML head, load it dynamical within your React component's lifecycle to ensure availability. The script should be loaded before calling any DingTalk methods.

   componentDidMount() {
     // Create a script element for the DingTalk API
     const dingtalkScript = document.createElement('script');
     dingtalkScript.src = 'https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js';
     dingtalkScript.async = true;
     // Set title once the API script is fully loaded
     dingtalkScript.onload = () => this.updateNavBarTitle('Process Overview');
     document.body.appendChild(dingtalkScript);
   }
   

2. Invoke the DingTalk Navigation API The dd.biz.navigation.setTitle method is used to set the title. Wrap the call within a dedicated function to handle potential errors and successful execution.

   updateNavBarTitle(pageTitle) {
     if (window.dd && window.dd.biz) {
       dd.biz.navigation.setTitle({
         title: pageTitle,
         onSuccess: function(result) {
           console.log('Title successfully updated:', result);
         },
         onFail: function(error) {
           console.error('Failed to update title:', error);
         }
       });
     } else {
       console.warn('DingTalk JSAPI is not available.');
     }
   }
   

Complete Component Example

import React, { Component } from 'react';

class PageContainer extends Component {
  componentDidMount() {
    const apiScript = document.createElement('script');
    apiScript.src = 'https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js';
    apiScript.async = true;
    apiScript.onload = () => this.updateNavBarTitle('Inbox Details');
    document.body.appendChild(apiScript);
  }

  updateNavBarTitle(pageTitle) {
    if (window.dd && window.dd.biz) {
      dd.biz.navigation.setTitle({
         title: pageTitle,
         onSuccess: (result) => console.log('Success:', result),
         onFail: (error) => console.error('Error:', error)
       });
    }
  }

  render() {
    return (
      <div>
        {/* Your application content */}
      </div>
    );
  }
}

export default PageContainer;