如何在React中使用JSX命名空间访问父组件变量

你给出的示例写法无法实现访问父组件变量，因为parent是Example组件内部的状态，而App组件的作用域里并没有这个变量，直接写{parent}会抛出“parent未定义”的错误。React组件的作用域是相互隔离的，子组件（这里的props.children属于App的渲染内容）不能直接读取父组件的内部变量，必须通过主动传递的方式实现。

下面是几种可行的解决方案：

方案一：使用渲染属性（Render Props） #

让Example组件接收一个函数作为children，把内部的parent变量作为参数传给这个函数，这样在App里就能拿到父组件的变量。

修改后的Example组件：

import { useState } from "react";

function Example(props) {
  const [parent, setParent] = useState("parent");

  // 将children当作函数调用，传入parent变量
  return <div>{props.children(parent)}</div>;
}

Example.Title = (props) => <> {props.children} </>;
Example.Body = (props) => <> {props.children} </>;

export default Example;

App组件的使用方式：

function App() {
  return (
    <div>
      <Example>
        {(parent) => ( // 接收父组件传递的parent变量
          <>
            <Example.Title>
              <p>this is Title</p>
            </Example.Title>
            <Example.Body>
              <p>this is Body</p>
              <p>value from {parent}</p>
            </Example.Body>
          </>
        )}
      </Example>
    </div>
  );
}

export default App;

方案二：使用Context上下文 #

如果需要在多个层级的组件中共享父组件的变量，Context是更合适的选择。我们可以把parent变量放到Context中，让子组件通过Context访问。

修改后的Example组件：

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

// 创建Context
const ParentContext = createContext();

function Example(props) {
  const [parent, setParent] = useState("parent");

  // 通过Provider提供Context值
  return (
    <ParentContext.Provider value={parent}>
      <div>{props.children}</div>
    </ParentContext.Provider>
  );
}

// 封装自定义Hook，方便子组件获取Context值
export const useParentContext = () => useContext(ParentContext);

Example.Title = (props) => <> {props.children} </>;
Example.Body = (props) => <> {props.children} </>;

export default Example;

App组件的使用方式：

import Example, { useParentContext } from './Example';

// 抽离一个内部组件，用于访问Context
const BodyContent = () => {
  const parent = useParentContext();
  return (
    <>
      <p>this is Body</p>
      <p>value from {parent}</p>
    </>
  );
};

function App() {
  return (
    <div>
      <Example>
        <Example.Title>
          <p>this is Title</p>
        </Example.Title>
        <Example.Body>
          <BodyContent />
        </Example.Body>
      </Example>
    </div>
  );
}

export default App;

方案三：克隆子组件并传递props #

通过React.cloneElement方法，给Example的子组件（Title/Body）注入parent属性，再由这些子组件传递给内部内容。这种方式相对繁琐，适合特定场景。

修改后的Example组件：

import { useState, Children, cloneElement } from "react";

function Example(props) {
  const [parent, setParent] = useState("parent");

  // 遍历children，给Title和Body注入parent属性
  const childrenWithParent = Children.map(props.children, child => {
    if ([Example.Title, Example.Body].includes(child.type)) {
      return cloneElement(child, { parent });
    }
    return child;
  });

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

Example.Title = (props) => <> {props.children} </>;
Example.Body = ({ children, parent }) => {
  // 继续给Body内部的子组件传递parent
  const bodyChildren = Children.map(children, child => {
    return cloneElement(child, { parent });
  });
  return <> {bodyChildren} </>;
};

export default Example;

App组件的使用方式：

function App() {
  // 自定义组件接收parent属性
  const ParentText = ({ parent }) => <p>value from {parent}</p>;

  return (
    <div>
      <Example>
        <Example.Title>
          <p>this is Title</p>
        </Example.Title>
        <Example.Body>
          <p>this is Body</p>
          <ParentText />
        </Example.Body>
      </Example>
    </div>
  );
}

export default App;

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