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

Question

import React from 'react'

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

在上面的代码中，我们看到 function 已传递给 onClick。以与 onClick 相同的方式，我需要传递存在的相同组件。 该组件由 a.js 和 a.css 文件组成。请您帮我解决一下。 提前致谢

Answer 1

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

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

如果您想继续使用功能，那么我建议您阅读手册，它写得非常好。