JIYIK CN >

We can pass components as props in React using the built-in children property. All the elements we pass between the component’s opening and closing tags will be assigned to the children property.

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>
  );
}

This example shows how everything we pass between the component's opening and closing tags is assigned to the children property in React.

The component can deconstruct the children property from its props object and render it like we did in the Center component. Alternatively, we can pass the component directly as a prop to the child component.

// 👇️ 将按钮属性重命名为 Button（大写首字母）
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>;
  };
  // 👇️ 将button作为属性传递给 Wrapper 组件
  return (
    <div>
      <Wrapper button={Button} />
    </div>
  );
}

We pass the Button component as props to the Wrapper component.

WrapperThe component must rename the prop from button to Button (with a capital letter), because all component names must start with a capital letter.

If the Button component accepted props, we could pass them down when using it in the Wrapper component. Alternatively, we could pass the component as a prop to the child component and set its properties directly.

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>
  );
}

In this example, we Wrapperset the props of the Button component directly when passing it to the component.

注意, instead of passing the actual component function, we pass the return value of the Button component.

This means we have to use the prop as {button}, rather than Wrapperin the component <Button/>.

We can mix and match as well. Here's an Buttonexample of passing a component that takes a children prop and renders its children.

function Wrapper({button: Button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button>
        <h2>一些按钮文本</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>
  );
}

Whatever we pass between the opening and closing tags of the Button component will be rendered.

When passing components as props, be careful about when you're passing an actual function component, e.g. button={Button}compared to when you're passing something that a function component returns, button={<Button text="一些按钮文本" />}e.g.

This is important because when we pass the actual function component, it can be used as <Button />. On the other hand, if you pass the return value of the function, it must be used as {button}.