React中如何从子组件向父组件传递子页面名称设置父组件标题

你可以通过父组件传递回调函数、子组件触发回调传值的方式实现需求，具体操作步骤如下：

步骤1：修改父组件AdminNoticePanel逻辑 #

父组件需要新增状态存储子组件传递的页面名称，同时给子组件传递更新状态的回调函数，修改后代码参考：

import { useState } from 'react';

const AdminNoticePanel = ({children}) => {
  const [name, setName] = useState("Administrar Noticias");
  // 新增状态存储子组件传递的页面名称
  const [pageName, setPageName] = useState("");

  return(
    <div>
      <div className="block">
        <div className="panelContent-title">
          <i className="icon icon-title-small" /> {name} - {pageName}
        </div>
        {/* 方式1：通过render props传递回调，适合子组件不固定的场景 */}
        {children(setPageName)}

        {/* 方式2：通过cloneElement注入回调，调用时嵌套写法更简洁，二选一即可
        {React.Children.map(children, child => 
          React.isValidElement(child) ? React.cloneElement(child, { setPageName }) : child
        )}
        */}
      </div>
    </div>
  )
}

步骤2：修改子组件AdminNoticeAddPanel逻辑 #

子组件接收父组件传递的回调函数，在组件挂载时触发回调把自身的页面名称传递给父组件，修改后代码参考：

import { useEffect } from 'react';

const AdminNoticeAddPanel = ({submitForm, setPageName}) => {
  const pageName = "TEST PAGE NAME";
  // 组件挂载时调用父组件的回调传递页面名称
  useEffect(() => {
    setPageName(pageName)
    // 可选：组件卸载时清空页面名称，根据业务需求决定是否保留
    return () => setPageName("")
  }, [setPageName, pageName])

  const { handleChange, values, errors } = NoticeService(
    submitForm,
    ValidateForm
  );
  // 后续子组件原有逻辑保持不变
}

步骤3：组件嵌套调用示例 #

对应上面两种回调传递方式，调用写法分别为：

• 对应render props方式：

<AdminNoticePanel>
  {(setPageName) => <AdminNoticeAddPanel submitForm={yourSubmitFunc} setPageName={setPageName} />}
</AdminNoticePanel>

• 对应cloneElement注入方式：

<AdminNoticePanel>
  <AdminNoticeAddPanel submitForm={yourSubmitFunc} />
</AdminNoticePanel>

如果你的项目用了React Router做路由嵌套，也可以直接在路由配置的元信息（meta）字段中存储页面名称，父组件直接从路由元信息取值即可，无需手动编写回调逻辑。

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