Question

当我单击其他组件中的元素（icon）时，我想显示/隐藏其中一个组件。

我知道如何从同一组件执行此操作（当具有onClick选项的元素位于同一组件上时），但不确定如何从其他组件中引用该选项。

我有Main.js组件，当我从LeftMenu中单击按钮时，我想在其中隐藏和显示其他组件。

Main.js组件：

import React, { Component } from 'react';
import './Main.css';
import {Helmet} from 'react-helmet';
import { Container, Row, Col, Navbar } from 'react-bootstrap';
import Tiles from '../Tile/Tiles'
import Header from '../Navbar/Navbar'
{/* import Tile from '../Tile/Tile' */}

class Main extends Component {

  constructor( props ) {
    super( props )
    this.state = { show: true };

    this.toggleDiv = this.toggleDiv.bind(this)
  }

  toggleDiv = () => {
    const { show } = this.state;
    this.setState({ show: !show })
  }

  render() {
    return (
          <div className="Main">
            {/* Background color set with Helmet */}
            <Helmet>
              <style>{'body { background-color: #1A2C3B; }'}</style>
            </Helmet>

            {/* Base Layout */}
             <div className="Container">
              <Row className="RowHeader">
              <Header  />
               </Row>
              <Row>
              { this.state.show && <Tiles /> }
              {/* <Tiles></Tiles> */}
            </Row>
          </div>
          </div> 
    );
  }
}

export default Main;

我希望在其中具有onClick选项的另一个组件：

import React, { Component } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import FaHome from 'react-icons/lib/fa/home';
import FaDropbox from 'react-icons/lib/fa/dropbox';
import logo from './logo.png';
import './LeftMenu.css';
import  toggleDiv  from '../Main/Main'

class LeftMenu extends Component {
  render() {
    return (
          <div className="LeftMenu">
            {/* Base Layout */}
             <div className="LeftContainer">
              <Row className="justify-content-md-center">
              </Row> 
              <Row className="justify-content-md-center">
                <div className="LeftIcon">
                  <FaHome/>
                </div>
              </Row> 
              <Row className="justify-content-md-center">
                <div className="LeftIcon">
                <button onClick={ toggleDiv }><FaDropbox/></button>
                </div>
              </Row> 
            </div>
          </div> 
    );
  }
}

export default LeftMenu;

因此，当单击FaDropbox图标时，我想隐藏

<Tiles />

来自Main.js并显示

<AnotherComponent />

上面的代码是我正在尝试的代码，但是会引发错误，我不确定如何从Main组件正确调用toggleDiv。由于我对React还很陌生，非常感谢您的帮助。

Answer 1

维护Main和LeftMenu的父级的状态。此过程称为提升状态。

假设Main和LeftMenu的父级都是ParentComponent。

因此，现在在父组件内部，如果您保持状态，则可以将其作为道具传递给主组件，将道具onClick传递给LeftMenu组件，例如

<LeftMenu onClick={toggleVisibility}/>
<Main show={this.state.visible} />

现在toggleVisibility功能将类似于

const toggleVisibility = () => {
  this.setState(prevState=>({visible: !prevState.visible}));
}

Answer 2

使用redux或使用上下文api，这将有助于将值从一个组件共享到另一个组件。上下文API： https://reactjs.org/docs/context.html

Answer 3

这就是为什么React应用程序中通常会有一些状态管理的原因，无论是Redux，MobX，Flux，ReactN还是其他。告诉您如何将状态管理引入您的应用程序的范围很大，因此，我提供了一种快速的解决方案：

包装器

因此，此问题的要点是将Main和LeftMenu都用一个包装器组件（我们将其称为LayoutWrapper）包装，该组件将管理show/hide的状态他们。如下所示：

class LayoutWrapper extends Component {
  constructor( props ) {
    super( props )
    this.state = { show: true };

    this.toggleDiv = this.toggleDiv.bind(this)
  }

  toggleDiv() {
    this.setState(prevState => ({ show: !prevState.show }))
  }

  render() {
    ...(your other components)...

    <Main showTiles={show} toggleDiv={toggleDiv}>
    <LeftMenu showTiles={show} toggleDiv={toggleDiv}>

    ...(rest of the code)...
  }
}

因此，简而言之，您是将状态提升到一个级别，然后将其作为道具传递到组件链中，以及可以更改状态的函数。

我希望这会有所帮助：）

P.S .：但是正如我在开始时所说，这将是一个完美的例子，说明为什么要使用某些状态管理库-最容易使用的状态管理库是ReactN-也许您应该give it a try？

Answer 4

希望这个可以帮助您！

const LeftMenu = (props) => (
 <button onClick={props.toggleComponents}>LeftMenu</button>
);

const Tiles = () => <div>Tiles</div>;
const AnotherComponent = () => <div>AnotherComponent</div>;

class Main extends React.Component{
  state ={
    isShowTiles:true
  };
  
  render(){
    return(
      <div>
         <LeftMenu toggleComponents={this.toggleComponents}/>
         <div class="toggleArea">
         {
           this.state.isShowTiles
             ? <Tiles />
             : <AnotherComponent/>
         }
         </div>
      </div>
    );
  }
  
  toggleComponents=()=>{
    this.setState({
     isShowTiles:!this.state.isShowTiles
    })
  }
}

ReactDOM.render(<Main/>, document.getElementById("root"));

.toggleArea{
margin:10px;
padding:10px;
border:5px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何通过其他组件上的元素设置onClick来显示/隐藏组件

4 个答案:

包装器