[英]React how to pass a component with its props to another component
I need to pass a wrapper to the component Test.我需要将包装器传递给组件测试。 This wrapper could be anything and it needs to have its own props (function, bool, string, whatever).
这个包装器可以是任何东西,它需要有自己的道具(函数、布尔值、字符串等等)。
function App() {
return (
<div className="App">
<h1>Yo</h1>
<Test Wrapper={<CustomWrapper text={"yes"} />} />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
The component Test receives it as a prop and renders it including the children (here 'Nope')组件 Test 将其作为 prop 接收并渲染它,包括子项(此处为“Nope”)
function Test({ Wrapper }) {
return (
<div>
<Wrapper>
<div>Nope</div>
</Wrapper>
</div>
);
}
What is the right pattern to do that?这样做的正确模式是什么?
Pass the child as a prop would work传递孩子作为道具会起作用
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.