在 React 中将组件作为 props 传递

作者

在 React 中将组件作为 props 传递

Pass a Component as props in React

你可以使用内置的children
prop 在 React 中将组件作为 props 传递。您在组件的开始和结束标记之间传递的所有元素都将分配给childrenprop。

应用程序.js
function Center({children}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {children}
    </div>
  );
}

export default function App() {
  const CustomHeading = () => {
    return <h2>Hello world</h2>;
  };

  // 👇️ pass children to the Center component
  return (
    <div>
      <Center>
        <CustomHeading />
      </Center>
    </div>
  );
}

该示例显示了我们在组件的开始和结束标记之间传递的所有内容如何分配给childrenReact 中的 prop。

children组件可以从其 props 对象中解构属性并像我们在Center组件中所做的那样渲染它。

或者，您可以直接将组件作为 prop 传递给子组件。

应用程序.js
// 👇️ rename button prop to Button (capital first letter)
function Wrapper({button: Button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button />
    </div>
  );
}

export default function App() {
  const Button = () => {
    return <button onClick={() => console.log('button clicked')}>Click</button>;
  };

  // 👇️ pass button as props to the Wrapper component
  return (
    <div>
      <Wrapper button={Button} />
    </div>
  );
}

我们将Button组件作为 props 传递给Wrapper组件。

该Wrapper组件必须将 prop 从重命名为（首字母大写），因为所有组件名称都必须以大写字母开头。 buttonButton

如果Button组件采用 props，我们可以在
Wrapper组件中使用它时传递它们。

或者，您可以将组件作为道具传递给子组件并直接设置其道具。

应用程序.js
function Wrapper({button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {button}
    </div>
  );
}

export default function App() {
  const Button = ({text}) => {
    return (
      <button onClick={() => console.log('button clicked')}>{text}</button>
    );
  };

  return (
    <div>
      <Wrapper button={<Button text="Some button text" />} />
    </div>
  );
}

Button在这个例子中，我们在传递给组件的时候直接设置了组件的 props Wrapper。

请注意，我们没有传递实际的组件函数，而是传递了Button组件的返回值。

这意味着我们必须使用 prop as {button}，而不是<Button/>在我们的Wrapper组件中。

您也可以混合搭配。这是一个传递Button组件的示例，该组件采用children道具并渲染其子组件。

应用程序.js
function Wrapper({button: Button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button>
        <h2>Some text here</h2>
      </Button>
    </div>
  );
}

export default function App() {
  const Button = ({children}) => {
    return (
      <button onClick={() => console.log('button clicked')}>{children}</button>
    );
  };

  return (
    <div>
      <Wrapper button={Button} />
    </div>
  );
}

无论我们在组件的开始标签和结束标签之间传递什么，Button都将被渲染。

将组件作为 props 传递时，请注意何时传递实际的函数组件，例如button={Button}，何时传递函数组件返回的内容，例如button={<Button text="Some button text" />}.

这很重要，因为当您传递实际功能组件时，它可以用作<Button />. 另一方面，如果传递函数的返回值，则必须将其用作{button}.

–

发表评论