如何将两个 children 喂给 React Component 并使用值？

Question

我目前有一个项目，我正在将两个值输入模态 window 的反应组件中。

其中一个children是要显示的文件的src。另一个是一个字符串，用于引用从哪个数组中提取 src。

我想将两个 children 传递到组件中，并针对不同的目的独立使用它们。

这里是我调用的组件：

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

组件内部结构如下：

export default function Modal({ open, onClose, children, activeString}) {

  if (!open) return null
  return (
    <>
      <div style={MODAL_STYLES}>
        <div onClick={onClose}>Close Modal</div>
        {activeString}
        {children}      
      </div>
      </div>
    </>
  )
}

结果显示 children 非常好，这是用来引用 accordionItems[activeSet].items[activeTrack].data 的，但是活动字符串不会显示，但如果我只提供一个参数就可以正常工作进入组件（活动字符串）。

这是为什么？

我这样做正确吗？我需要能够访问两者！

谢谢

Answer 1

如果要pass activeString是道具。将其与 Modal 内联传递：

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

如何将两个 children 喂给 React Component 并使用值？

How to feed two children to React Component and use values?

javascript

components

reactjs

react-props