如何在反应中将组件传递给onClick

【问题标题】：How to pass component to onClick in react如何在反应中将组件传递给onClick
【发布时间】：2021-06-23 06:02:15
【问题描述】：

import React from 'react'

export default () => {
  function clickHandler() {
    console.log('Button clicked')
  }
  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  )
}

在上面的代码中，我们看到一个函数已传递给 onClick。以同样的方式传递给 onClick，我需要传递一个存在于同一个 src 中的不同组件。这个组件由一个 .js 和一个 .css 文件组成。你能帮我解决一下吗？提前致谢

【问题讨论】：

为什么要传递一个组件？预期的结果是什么？
能否详细说明，为什么要将组件传递给 onClick 函数？
这听起来不对。我建议您使用不同的方法。
你想要的是Conditional Rendering这个例子应该可以帮助你codepen.io/gaearon/pen/QKzAgB
@AjeetShah 谢谢你的帮助

标签： javascript css reactjs react-native jsx

【解决方案1】：

如果您不介意使用类而不是函数，您的 other 组件应如下所示：

import React from 'react'

class ShowThisAfterClick extends React.Component {
  return (
    <div>
      <p>This is what you want to show</p>
    </div>
  )
}
export default ShowThisAfterClick

现在您应该更新已显示的组件：

import React from 'react'
import ShowThisAfterClick from './where/you/put/the/ShowThisAfterClick.js'

class Main extends React.Component {
  constructor(props){
    super(props)
    this.state = { isButtonClicked: false }

    this.clickHandler = this.clickhandler.bind(this)
  }
  
  clickHandler() {
    this.setState({ isButtonClicked: true })
  }
  
  render() {
    const { isButtonClicked } = this.state
    return (
      <div>
        <button onClick={ this.clickHandler }>Click</button>
        { isButtonClicked ? <ShowThisAfterClick /> : ''}
      </div>
    )
  }
}
export default Main

如果你想继续使用函数，那么我会建议read the manual，写得很好。

【讨论】：