Javascript 复合组件：如何引用react中单击的子元素？

我有以下几个组件

函数父函数（{children}）{
返回{children}；
}
函数MyChild（{children}）{
返回{children}；
}
函数App（）{
返回(
文本
文本
);
}

---

我想捕获父组件中单击的

MyChild

元素，并向其附加一个类。如何在不更改此实现的情况下执行此操作？

您可以执行以下操作：

function Parent({ children }) {

  return <div>
    {children}
  </div>
}

function MyChild({ children ,handleClick}) {
  return <div onClick={handleClick}>{children}</div>
}

function App() {
  return <div>
    <Parent>
      <MyChild handleClick={() => console.log("hello1")}>text</MyChild>
      <MyChild  handleClick={() => console.log("hello2")}>text</MyChild>
    </Parent>
  </div>
}

函数父函数（{children}）{
返回
{儿童}
}
函数MyChild（{children，handleClick}）{
返回{children}
}
函数App（）{
返回
console.log（“hello1”）}>text
console.log（“hello2”）}>text
}

这是演示：。

---

虽然这不是推荐的方式。我建议您为此使用上下文。

您可以使用React.cloneElement。乙二醇

function Parent({ children }) {

  return <div>
    {React.Children.map(
      React.Children.toArray(children),
        (child) => {
          React.cloneElement(
            child,
            { onClick: () => { /** Do stuf */ } }
          )
        }
      )}
    </div>
}

函数父函数（{children}）{
返回
{React.Children.map(
反应。孩子们。到阵列（孩子们），
（儿童）=>{
克隆元素(
小孩
{onClick:（）=>{/**Do stuf*/}
)
}
)}
}

您需要将属性弹出到每个

父项

子项：

函数父函数（{children}）{
const ejectedChildren=Children.map（Children，child=>
cloneElement（子，{onClick:（）=>console.log（'Clicked'）}）
);
返回{ejectedChildren}；
}

使用附加的

onClick

prop将每个子元素映射到新元素

React.Children.map

接收组件

Children

和

mapping

函数

React.cloneElement

接收一个组件和附加属性，然后创建一个新组件，并将新的道具合并到其中

演示：

另一个