如何在Next.js 14的Template特性中实现子组件向模板传数据？

针对你遇到的模板组件无法获取子组件头部数据的问题，以下是几种可行的实现方案：

方案一：通过克隆子组件注入回调，主动上报数据 #

这种方式直接通过父组件给子组件传递回调函数，子组件挂载时将自身的头部数据传给父组件，切换子组件时自动更新。

修改 template.js #

import { useState } from 'react';

const Template = ({ children }) => {
  const [headerData, setHeaderData] = useState({
    title: '',
    description: ''
  });

  // 遍历子组件，注入数据上报回调
  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        onProvideHeaderData: setHeaderData
      });
    }
    return child;
  });

  return (
    <div>
      <div className="subheader">
        <h2>{headerData.title}</h2>
        <p>{headerData.description}</p>
      </div>
      <div>{childrenWithProps}</div>
    </div>
  );
};

export default Template;

修改 child1.js #

import { useEffect } from 'react';

const Child1 = ({ onProvideHeaderData }) => {
  const headerData = {
    title: "Child 1",
    description: "Im the first child but my parent doesn't know that, why does it hate me?"
  };

  useEffect(() => {
    // 组件挂载时上报数据
    onProvideHeaderData(headerData);
    // 卸载时清空头部（可选）
    return () => onProvideHeaderData({ title: '', description: '' });
  }, [onProvideHeaderData]);

  return (
    <div>
      Im a child component so dont blame me if I do childish things.
    </div>
  );
};

export default Child1;

方案二：使用 React Context 跨层级管理头部数据 #

如果子组件层级较深，不想逐层传递回调，可以用 Context 实现数据共享，子组件直接更新 Context 中的头部数据，模板组件实时获取。

创建 HeaderContext.js #

import { createContext, useState, useContext } from 'react';

const HeaderContext = createContext({
  headerData: { title: '', description: '' },
  setHeaderData: () => {}
});

export const HeaderProvider = ({ children }) => {
  const [headerData, setHeaderData] = useState({
    title: '',
    description: ''
  });

  return (
    <HeaderContext.Provider value={{ headerData, setHeaderData }}>
      {children}
    </HeaderContext.Provider>
  );
};

export const useHeader = () => useContext(HeaderContext);

修改 template.js #

import { useHeader } from './HeaderContext';

const Template = ({ children }) => {
  const { headerData } = useHeader();

  return (
    <div>
      <div className="subheader">
        <h2>{headerData.title}</h2>
        <p>{headerData.description}</p>
      </div>
      <div>{children}</div>
    </div>
  );
};

export default Template;

修改 child1.js #

import { useEffect } from 'react';
import { useHeader } from './HeaderContext';

const Child1 = () => {
  const { setHeaderData } = useHeader();
  const headerData = {
    title: "Child 1",
    description: "Im the first child but my parent doesn't know that, why does it hate me?"
  };

  useEffect(() => {
    setHeaderData(headerData);
    return () => setHeaderData({ title: '', description: '' });
  }, [setHeaderData]);

  return (
    <div>
      Im a child component so dont blame me if I do childish things.
    </div>
  );
};

export default Child1;

注意：需要在应用的根组件外层包裹 HeaderProvider，确保所有子组件能访问到 Context。

方案三：子组件暴露静态属性存储固定数据 #

如果子组件的头部数据是固定不变的，可以直接将数据作为组件的静态属性，模板组件读取该属性更新头部。

修改 child1.js #

const Child1 = () => {
  return (
    <div>
      Im a child component so dont blame me if I do childish things.
    </div>
  );
};

// 静态属性存储头部数据
Child1.headerData = {
  title: "Child 1",
  description: "Im the first child but my parent doesn't know that, why does it hate me?"
};

export default Child1;

修改 template.js #

import { useState, useEffect } from 'react';

const Template = ({ children }) => {
  const [headerData, setHeaderData] = useState({ title: '', description: '' });

  useEffect(() => {
    // 取第一个有效子组件的静态数据
    const validChild = React.Children.toArray(children).find(child => React.isValidElement(child));
    if (validChild?.type?.headerData) {
      setHeaderData(validChild.type.headerData);
    }
  }, [children]);

  return (
    <div>
      <div className="subheader">
        <h2>{headerData.title}</h2>
        <p>{headerData.description}</p>
      </div>
      <div>{children}</div>
    </div>
  );
};

export default Template;

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