使用一个组件中的按钮来渲染主（App）组件中的另一个组件

Question

我正在尝试显示/隐藏一个组件，它是 ItemMain，并且使用另一个组件 NavLogoNew 中的按钮导入到主 App 组件。我尝试以多种不同的方式执行此操作，但看起来按钮不知道它是否被单击，当我手动更改真/假时它可以工作。在网络上，我发现了很多关于只涉及两个组件的情况的东西，但没有这样的。我的代码：

应用程序

import React from 'react';
import './App.css';
import { tsPropertySignature } from '@babel/types';
import { statement } from '@babel/template';

import NavBar from './../Components/Navigation/NavBar/NavBar.js';
import ItemMain from './../Components/Item/ItemMain/ItemMain.js';
import ItemList from './../Components/Item/ItemList/ItemList.js';
import NavButtonTop from './../Components/Navigation/NavButton/NavButtonTop/NavButtonTop.js';
import NavLogoNew from './../Components/Navigation/NavButton/NavButtonNew/NavLogoNew.js';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      visible: !this.visible
    })
  }     

  render() {
    return (
      <div className="App">
        <NavBar />
        {this.state.visible ? <ItemMain /> : null}
        <ItemList />
        <NavButtonTop name='UP'/>
      </div>
    );
  }
}


export default App;

NavLogoNew：

import React from 'react';
import './NavLogoNew.css';
import ItemMain from './../../../Item/ItemMain/ItemMain.js'


class NavLogoNew extends React.Component {
    render() {
        return (    
            <button 
                className='NavLogoNew'
                onClick={this.props.click}  
            >
                {this.props.name}  
            </button>
        );
    }
}

export default NavLogoNew;

Answer 1

您的 handleClick 函数缺少某些东西
使用!this.state.visible 所以从下面改变

handleClick(){
    this.setState({
      visible: !this.visible
    })
  }

到

 handleClick = () => {
    this.setState({
      visible: !this.state.visible
    })
  }

将handleClick函数传递给NavLogoNew，如下所示

<NavLogoNew onClick = {this.handleClick} />

在 NavLogoNew 组件内部，您应该按如下方式调用它

class NavLogoNew extends React.Component {
    render() {
        return (    
            <button 
                className='NavLogoNew'
                onClick={() => this.props.onClick()}  
            >
                {this.props.name}  
            </button>
        );
    }
}