javascript - 如何在React中调用点击事件的组件？

Question

我有一个简单的 react 应用程序。我想在单击事件上调用组件。现在发生的情况是，当我单击该函数时，它会被调用，但该组件不会更改。我尝试检查路径，一切看起来都很好，因为当我将相同的组件放入渲染中时，它就会被执行。这是我的代码:

请让我知道我做错了什么。

请忽略一些错误的 if else 条件，我已将它们尝试 bug 但无济于事。

header.jsx

   class Head extends React.Component {
  handleClick = (e) => {
    console.log(e.key);
    <Cont key1 = e.key />
  }


  render(){
      return( 
      <Header>
        <div className="logo" />
        <Menu
        onClick={ this.handleClick }>
        <Menu.Item key="1">Hungry Rides</Menu.Item>
        <Menu.Item key="2">Hiker's Diary</Menu.Item>
        <Menu.Item key="3">Hiking @ Hometown </Menu.Item>
      </Menu>
    </Header>
    )
  }
}

内容.jsx

    class Cont extends React.Component {

  constructor(props) {
    super(props);
    thisDefault = this.props.key1
    console.log('inside constructor')
    // alert(this.props.key1)
    if ( thisDefault != 100){
        alert('miracle')
    thisDefault = 1
  }


componentWillMount() {
    console.log('component mounted')
}

componentWillUnmount() {
    console.log('unmounted')
}

componentWillReceiveProps() {
    console.log('ghfdshg')
}



  render(){
    console.log('called from key')
    let data = null
     if(thisDefault == null) {
     data = (
      <div id = "journal" style={{ background: '#fff', padding: 24 , textAlign : 'center'}}>
       <Intro />
      </div>
      )
  }
  else{
  data = (  <div id = "journal" style={{ background: '#fff', padding: 24 , textAlign : 'center'}}>
       <h1> Hello </h1>
      </div>
      )
  }
    return( 
        <Content style={{ padding: '0 50px' }}>
        <Bread />
        <Slider />
    {data}
    </Content>

    )}}

    export default Cont

Answer 1

最好的方法是更新状态并检查它并渲染组件。

class Head extends React.Component {
  state = {
    key: null
  }

  handleClick = ({key}) => {
    this.setState({key})
  }


  render(){
      const {key} = this.state;
  
      return( 
      <Header>
        <div className="logo" />
        {key && <Cont key1 ={key} />}
        <Menu
        onClick={ this.handleClick }>
        <Menu.Item key="1">Hungry Rides</Menu.Item>
        <Menu.Item key="2">Hiker's Diary</Menu.Item>
        <Menu.Item key="3">Hiking @ Hometown </Menu.Item>
      </Menu>
    </Header>
    )
  }
}