反应如何将一个组件及其道具传递给另一个组件

Question

我需要将包装器传递给组件Test。这个包装器可以是任何东西，它需要有自己的道具（函数，布尔值，字符串等）。

function App() {
  return (
    <div className="App">
      <h1>Yo</h1>
      <Test Wrapper={<CustomWrapper text={"yes"} />} />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Test组件将其作为道具接收，并使其包含子项（此处为“ Nope”）呈现

function Test({ Wrapper }) {
  return (
    <div>
      <Wrapper>
        <div>Nope</div>
      </Wrapper>
    </div>
  );
}

执行此操作的正确模式是什么？

Answer 1

通过孩子作为道具可以工作

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Yo</h1>
      <Test Wrapper={CustomWrapper({ text: "yes" })} />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const Test = ({ Wrapper }) => {
  return (
    <div>
      <Wrapper children={<div>Nope</div>} />
    </div>
  );
};

const CustomWrapper = props => ({ children }) => {
  return (
    <div>
      {children}
      {props.text}
    </div>
  );
};