如何通过子组件属性更新React应用的文档标题？

嘿，这个需求其实挺常见的，咱们可以用几种不同的方式来实现，我给你拆解一下：

这种方式的核心是让Main组件把设置标题的方法通过props传递给子组件，子组件调用这个方法就能更新文档标题。我们需要修改Main的render方法，克隆子组件并注入回调：

class Main extends React.Component {
  // 初始化标题（可选，也可以让子组件挂载时自行设置）
  componentDidMount() {
    document.title = this.props.title || '默认标题';
  }

  // 封装设置标题的方法，供子组件调用
  setDocumentTitle = (title) => {
    document.title = title;
  };

  render() {
    const { children } = this.props;
    // 遍历并克隆所有子组件，注入setDocumentTitle方法
    const childrenWithProps = React.Children.map(children, child => {
      if (React.isValidElement(child)) {
        return React.cloneElement(child, {
          setDocumentTitle: this.setDocumentTitle
        });
      }
      return child;
    });

    return <div>{childrenWithProps}</div>;
  }
}

子组件使用示例 #

不管是函数组件还是类组件，都可以直接通过props调用这个方法：

// 函数式子组件
function ChildBtn(props) {
  const handleChangeTitle = () => {
    props.setDocumentTitle('子组件触发的新标题');
  };

  return <button onClick={handleChangeTitle}>点击修改标题</button>;
}

// 类式子组件
class ProfilePage extends React.Component {
  componentDidMount() {
    // 组件挂载时自动设置标题
    this.props.setDocumentTitle('用户个人中心');
  }

  render() {
    return <div>这是个人中心页面</div>;
  }
}

// 应用层级使用
class App extends React.Component {
  render() {
    return (
      <Main>
        <ChildBtn />
        <ProfilePage />
      </Main>
    );
  }
}

如果你的子组件嵌套得很深（比如子组件的子组件需要修改标题），传递props会非常繁琐，这时用Context是更优雅的选择：

第一步：创建标题Context #

const TitleContext = React.createContext({
  setTitle: () => {} // 默认空实现，避免报错
});

第二步：修改Main组件作为Context Provider #

class Main extends React.Component {
  setDocumentTitle = (title) => {
    document.title = title;
  };

  render() {
    const { children } = this.props;
    return (
      <TitleContext.Provider value={{ setTitle: this.setDocumentTitle }}>
        <div>{children}</div>
      </TitleContext.Provider>
    );
  }
}

第三步：子组件消费Context #

// 函数组件用useContext钩子
import React, { useContext } from 'react';

function DeepNestedChild() {
  const { setTitle } = useContext(TitleContext);

  return (
    <button onClick={() => setTitle('深层子组件设置的标题')}>
      点击修改标题
    </button>
  );
}

// 类组件用Context.Consumer
class ClassDeepChild extends React.Component {
  render() {
    return (
      <TitleContext.Consumer>
        {({ setTitle }) => (
          <div onClick={() => setTitle('类组件深层设置的标题')}>
            点击我修改标题
          </div>
        )}
      </TitleContext.Consumer>
    );
  }
}

如果你的项目已经使用React Hooks，可以把Main改成函数组件，代码会更简洁：

import React, { useEffect, useCallback } from 'react';

const Main = ({ children, defaultTitle = '默认标题' }) => {
  // 初始化标题
  useEffect(() => {
    document.title = defaultTitle;
  }, [defaultTitle]);

  // 缓存设置标题的方法，避免子组件重复渲染
  const setDocumentTitle = useCallback((title) => {
    document.title = title;
  }, []);

  // 给子组件注入方法
  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { setDocumentTitle });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
};

适用场景总结 #

• 如果子组件是直接嵌套在Main下的，用方案1最直接；
• 如果子组件嵌套层级很深，用方案2更省心；
• 如果是新的React项目，推荐用方案3的Hooks写法。

内容的提问来源于stack exchange，提问作者jager91