Reactjs 是否添加单击事件以渲染道具？

我有一个父组件，其中包括一个子组件，并将一些渲染道具传递给它

const Parent = () => {
    return(
        <div>
            <h1>Title</h1>
            <Child>
                Text that I want
            </Child>
        </div>
    )
}

class Child extends React.Component{
    handleClick() {
        console.log('Hi')
    }
    render() {
        return(
            {this.props.children}
        )
    }
}

const Parent=（）=>{
返回(
标题
我想要的文本
)
}
子类扩展了React.Component{
handleClick（）{
console.log（'Hi'）
}
render（）{
返回(
{this.props.children}
)
}
}

---

当单击渲染道具内容“我想要的文本”并执行子级的handleClick函数时，如何使其如此

在

Child

组件中用元素包装子元素，并将其传递给事件处理程序：

render() {
    return(
        <div onClick={() => this.handleClick()}> 
            {this.props.children}
        </div>
    )
}

render（）{
返回(
this.handleClick（）}>
{this.props.children}
)
}

像这样吗

class Child extends React.Component{
    handleClick() {
        console.log('Hi')
    }
    render() {
        // pass click handler as an argument to function
        return this.props.children(this.handleClick.bind(this));
    }
}

const Parent = () => (
    <div>
       <h1>Title</h1>
       <Child>
         // use click handle passed as argument
         {clickHandler => <p onClick={clickHandler}>Text that I want</p>}
       </Child>
    </div>
)

类子级扩展React.Component{
handleClick（）{
console.log（'Hi'）
}
render（）{
//将click处理程序作为参数传递给函数
返回this.props.children（this.handleClick.bind（this））；
}
}
常量父项=（）=>(
标题
//使用作为参数传递的单击句柄
{clickHandler=>
我想要的文本
}
)

---

因为你不能让任何事件来自纯文本，所以你需要像

p

这样的标记来附加它。

你可以简单地利用

React.cloneElement

如果

this.props.children

是字符串以外的任何东西，或者在span中包装文本并将处理程序附加到它

const Parent = () => {
  return (
    <div>
      <h1>Title</h1>
      <Child>
        Text that I want
      </Child>
    </div>
  )
}

class Child extends React.Component {
  handleClick() {
    console.log('Hi')
  }
  render() {
    console.log(this.props.children)
    if(typeof this.props.children === 'string') {
      return <span onClick={this.handleClick}>{this.props.children}</span>
    }
    return React.cloneElement(this.props.children, {
      onClick: this.handleClick
    });
  }
}

const Parent=（）=>{
返回(
标题
我想要的文本
)
}
子类扩展了React.Component{
handleClick（）{
console.log（'Hi'）
}
render（）{
console.log（this.props.children）
if（this.props.children的类型=='string'）{
返回{this.props.children}
}
返回React.cloneElement（this.props.children{
onClick:this.handleClick
});
}
}

---

但是如果我传递一个按钮而不仅仅是文本？那么我希望按钮上的点击事件不是包含div.@Evans的，那么为什么不处理来自父组件的事件，然后将结果（不管是什么）传递给子组件呢？我的要求是“handleClick”函数可以在不同组件之间共享。显然，在我的实际代码中，“handleClick”要复杂得多。@Evans通常在单击时，它会更新状态，组件只呈现该状态（您不需要在每个组件中使用处理程序）。但是，如果您想对来自多个源的事件做出反应，您可以寻找一些发布/订阅事件库。如果您将多个元素呈现为子组件，那么您想做什么？不需要这样做。我的实际使用案例是我有一个阿波罗的变种，我需要在不同的组件中使用。我将只渲染子对象中的一个组件。