如何将两个孩子喂给 React 组件并使用值？

Posted 2023-02-23

【中文标题】如何将两个孩子喂给 React 组件并使用值？

【英文标题】：How to feed two children to React Component and use values?

【发布时间】：2021-11-07 08:47:33

【问题描述】：

我目前有一个项目，其中我将两个值输入到模式窗口的反应组件中。

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

我想将两个子组件传递给组件，并将它们独立用于不同的目的。

这是我调用组件：

       <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>
    </>
  )

结果显示孩子们非常好，这是用来引用手风琴Items[activeSet].items[activeTrack].data 但是不显示活动字符串，但如果我只将一个参数输入组件（活动字符串）。

这是为什么？

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

谢谢

【参考方案1】：

如果你想通过activeString 是一个道具。将其与 Modal 内联传递：

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