React 中如何传递组件？

2023-09-22 11:59:03

React 中传递组件的三种方式

在 React 中，传递组件主要有三种方式：

props
render props
context

props

props 是 React 中最常用的传递组件的方式。它是一种简单、直接的方法，可以将数据从父组件传递给子组件。props 是一个对象，它包含了父组件想要传递给子组件的所有数据。

// 父组件
const Parent = () => {
  const name = "John";
  return <Child name={name} />;
};

// 子组件
const Child = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

在上面的示例中，父组件 Parent 将 name 属性传递给了子组件 Child。子组件 Child 使用 props.name 来渲染组件。

render props

render props 是一种更高级的传递组件的方式。它允许父组件将一个函数作为属性传递给子组件，然后子组件可以使用该函数来渲染自身。

// 父组件
const Parent = () => {
  const name = "John";
  return <Child render={(name) => <h1>Hello, {name}!</h1>} />;
};

// 子组件
const Child = (props) => {
  return props.render(props.name);
};

在上面的示例中，父组件 Parent 将一个函数作为 render 属性传递给了子组件 Child。子组件 Child 使用 props.render 函数来渲染自身。

context

context 是一种特殊的 props，它允许组件在其子组件树中共享数据。context 由父组件提供，并可以被其所有子组件访问。

// 父组件
const Parent = () => {
  const name = "John";
  return (
    <ContextProvider value={{ name }}>
      <Child />
    </ContextProvider>
  );
};

// 子组件
const Child = () => {
  const name = useContext(Context);
  return <h1>Hello, {name}!</h1>;
};