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

我需要向组件测试传递一个包装器。这个包装可以是任何东西，它需要有自己的道具（函数、bool、字符串等等）

函数应用程序（）{
返回(
哟
开始编辑，看看神奇的发生！
);
}

组件测试将其作为道具接收并呈现，包括子级（此处为“Nope”）

函数测试（{Wrapper}）{
返回(
不
);
}

---

这样做的正确模式是什么？

将孩子作为道具传递会起作用

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

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
返回(
哟
开始编辑，看看神奇的发生！
);
}
常量测试=（{Wrapper}）=>{
返回(
);
};
const CustomWrapper=props=>（{children}）=>{
返回(
{儿童}
{props.text}
);
};

---

您是否尝试过使用

儿童
道具这是我已经尝试过的，但是如果你需要将道具传递给CustomWrapper，并且只适用于CustomWrapper怎么办？@Nicc Updated，请检查一下，如果CustomWrapper实际上是一个类，如何使其工作？这似乎是可以接受的that@Nicc很抱歉，尝试失败了，但是，我想这是一个很好的做法。无论是现在还是将来，功能组件都没有成本。不过，如果有人能做到这一点，请随意制作一个版本。最后，如果你愿意，请接受它作为答案。
function Test({ Wrapper }) {
  return (
    <div>
      <Wrapper>
        <div>Nope</div>
      </Wrapper>
    </div>
  );
}

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