在react中添加子组件

Question

我想在Wrapper组件的demo元素中添加子元素

function Wrapper() {
return (
<div className="demo">Something</div>
)
}

<Wrapper>
<span>This is something</span>
</Wrapper>

但是这行不通!正确的做法是什么?

Answer 1

可以使用childrenprop

function Wrapper({children}) {
return (
<div className="demo">{children}</div>
)
}

Answer 2

简单的方法是调用{props.children}

function Wrapper(props) {
return (
<div className="demo">{props.children}</div>
)
}
ReactDOM.render(
<Wrapper>
<span>This is something</span>
</Wrapper>
, document.getElementById('root'));

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

选自@Soroush Chehresa对What is {this.props。什么时候该用?说:

this.props.children所做的是，它被用来显示任何你调用组件时，在开始和结束标记之间包含

Answer 3

将包装器组件更改为:

function Wrapper({ children }) {
return (
<>
<div className="demo">Something</div>
{children}
</>
);
}

Answer 4

在您的包装器函数中，只需将子节点作为参数添加，因为包装器函数需要消费某些东西来为您提供某些东西，因此只需将子节点传递给包装器函数，该包装器函数内部呈现作为参数传递的子节点

function Wrapper({children}) {
return (
<div className="demo">{children}</div>
)
}