Question

我有一个Parent组件，它包含一个Child组件并传递一些渲染道具。

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

当点击渲染道具内容“我想要的文字”时，我怎么能这样做？执行Child的handleClick函数？

Answer 1

使用元素将Child组件中的子项包装起来并将其传递给事件处理程序：

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

Answer 2

喜欢这个吗？

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

因为您无法从纯文本中获取任何事件，因此您需要使用p这样的标记来附加它。

Answer 3

如果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
    });
  }
}

<强> Working sandbox

添加点击事件来渲染道具？

3 个答案: