在TypeScript中通过props传递的react组件中注入子组件

Question

我有一个组件，我想把一些东西附加到通过props传递的父组件。比如:

function MyComponent(props : IMyProps) {
return ( {<props.parent>}{myStuff}{</props.parent>}
}

所以我可以这样调用我的新组件:

<MyComponent parent={<h1 />} />

和MyComponent将附加子元素到h1元素。这能做到吗?

Answer 1

parent已经是一个JSX，但你的问题是你还没有通过代表myStuff的children

请注意，React的组件只能用首字母大写的名称调用，所以我已经将parent分配给Parent，同时，我还添加了React.Fragment，以防止parent的未定义值情况。

const MyComponent = ({ parent }) => {
const Parent = parent || React.Fragment //convert it to a callable component
const myStuff = "Testing" //simulating your stuff
return <Parent>{myStuff}</Parent>
}
ReactDOM.render(
<MyComponent parent={({children}) => <h1>{children}</h1>}/>,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果您只想传递<h1/>，您需要克隆元素并通过React.cloneElement传递MyComponent中的children

const MyComponent = ({ parent }) => {
const myStuff = "Testing" //simulating your stuff
return React.cloneElement(parent, {}, myStuff)
}
ReactDOM.render(
<MyComponent parent={<h1/>}/>,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>