如何向React组件传递两个子值并实现独立调用？

问题原因 #

你当前的传参写法不符合React组件props传递规则：

• 写在组件标签内部的所有内容（包括你写的accordionItems[activeSet].items[activeTrack].data和activeString）会被统一打包为children属性传入组件，你没有在组件标签上显式声明activeString属性，所以组件内部解构拿到的activeString是undefined，自然不会渲染。
• 你单独传入activeString时可以正常显示，是因为此时你是把它作为独立props传递给组件的，能被正常识别。

另外你提供的组件内部代码存在语法错误：多写了一个多余的</div>闭合标签，需要删除避免运行报错。

修复方案 #

方案1（推荐）：显式传递activeString为独立props #

修改组件调用代码，把activeString放到组件标签的属性位置：

<Modal 
  open={isOpen} 
  onClose={() => setIsOpen(false)}
  activeString={activeString}
>
  {accordionItems[activeSet].items[activeTrack].data}
</Modal>

修改后你原有组件内部的代码无需调整，就能正常渲染两个值。

方案2：从现有children中拆分取值 #

如果你不想调整调用时的写法，可以直接处理children数组（不推荐，耦合度高，后续children结构变化容易出错）：

export default function Modal({ open, onClose, children}) {
  if (!open) return null
  // 按顺序从children中取出两个值
  const [fileData, activeString] = children
  return (
    <>
      <div style={MODAL_STYLES}>
        <div onClick={onClose}>Close Modal</div>
        {activeString}
        {fileData}      
      </div>
    </>
  )
}

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