在反应中添加子组件

Posted 2023-02-23

【中文标题】在反应中添加子组件

【英文标题】：Adding child components in react

【发布时间】：2021-04-21 18:56:26

【问题描述】：

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

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

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

但这不起作用！ 这样做的正确方法是什么？

【问题讨论】：

demo 元素在哪里？

【参考方案1】：

您可以使用children prop 来做到这一点

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

【参考方案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.children and when you should use it? 的回答中说：

this.props.children 的作用是它被用来显示你想要的任何东西 调用组件时在开始标签和结束标签之间包含

【参考方案3】：

将您的包装器组件更改为：

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

【参考方案4】：

就像在你的包装函数中一样，只需添加子作为参数，因为包装函数需要消耗一些东西来为你提供一些东西，所以只需将子传递给包装函数，它在内部呈现你的子作为参数传递

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