反应访问标签内的子元素答案

【问题标题】：React accessing childeren elements inside tag反应访问标签内的子元素
【发布时间】：2021-11-25 13:43:15
【问题描述】：

我被要求更改为以下样式：

      <More>
        {Dates}
        {Info}
        {articles}
      </More>

但是我现在如何在更多组件中访问这些？以前，我将它们作为更多的道具传递，但现在我所拥有的只是代码示例，上面写着 {childeren}，仅此而已..

更多组件：

 <div>
  {isOpen ? {?!?} : null}
  <Button
    onClick={toggleShowMore}
    text={showMoreButtonText}
    variation={'tertiary'}
    iconPosition={'iconRight'}
    Icon={isOpen ? chevronUp : chevronDown}
  />
</div>

编辑：所以这里的目标是根据 isOpen 布尔值显示/隐藏更多（日期、信息...）的内容。

【问题讨论】：

您能分享一下代码沙箱中当前的工作代码吗？以便我们了解现在正在发生的事情。
@SelvaS 我没有这方面的工作代码。现在什么都没有发生，因为我不知道如何根据 isOpen 切换隐藏/显示更多内部的组件。
尝试将内容放入条件{isOpen ? {<><Button>Test</Button></>} : null}

标签： reactjs components

【解决方案1】：

我很困惑，你问题的标题本身就告诉你该怎么做 - 使用children：

const More = ({ children }) => {

   return (
     <div>
      {isOpen ? children : null}
      ...
     </div>
   );

}

这是你想要的吗？

【讨论】：