React More组件如何访问内部children元素实现内容显隐控制

你直接在{?!?}的位置替换为props.children即可。
React 会自动将嵌套在组件标签内部的所有内容收集到组件的children属性中，不需要额外定义自定义props接收，完全适配你当前控制整体内容显隐的需求。

调整后的完整组件示例（函数组件） #

// 组件入参先解构拿到children属性
const More = ({ isOpen, toggleShowMore, showMoreButtonText, chevronUp, chevronDown, children }) => {
  return (
    <div>
      {isOpen ? children : null}
      <Button
        onClick={toggleShowMore}
        text={showMoreButtonText}
        variation={'tertiary'}
        iconPosition={'iconRight'}
        Icon={isOpen ? chevronUp : chevronDown}
      />
    </div>
  )
}

如果你用的是类组件，对应替换为this.props.children即可。
如果后续你需要单独处理某个子元素（比如单独控制Dates的显隐），可以用React.Children系列API做遍历处理，当前场景直接渲染children就能满足要求。

内容的提问来源于stack exchange，提问作者Clomez