显示和隐藏React JS

Question

在我的反应JS代码中，我有2个Onclick函数

    class Traders extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 10,
          listVisibleList: false,
          gridVisibleList: false,
          listVisibleGrid: false,
          gridVisibleGrid: false

        };
      }

      componentDidMount() {
      }


      onClickListView() {
        this.setState({
          listVisibleList: !this.state.listVisibleList,
          gridVisibleList: !this.state.gridVisibleList
        });
      }

      onClickGridView(){
        this.setState({
          listVisibleGrid: !this.state.listVisibleGrid,
          gridVisibleGrid: !this.state.gridVisibleGrid
        });
      }

      render() {
        const widthRisk = {
          width: '60%'
        };

        return (
          <div id="home">

                      <Col xs={12} sm={12} md={2}>
                        <div className="option-layout">
                          <ul>
                            <li>
                              <a href="#" onClick={() => this.onClickListView()}>
                                <img src="../../src/assets/images/list.png" className="img-respnsive" alt="list" />
                              </a>
                            </li>
                            <li>
                              <a href="#" onClick={() => this.onClickGridView()} >
                                <img src="../../src/assets/images/grid.png" className="img-respnsive" alt="grid" />
                              </a>
                            </li>
                          </ul>
                        </div>
                      </Col>

                {
                  this.state.listVisibleList ? <ListTrader /> : <ListTrader />
                }



                {/* <ListTrader /> */}
                {/* <GridTrader /> */}

                </div>
)
}

问题是我想如何显示某些特定组件。

当我点击onClickListView它显示<ListTrader />成分和<GridTrader />元器件隐藏

当我单击onClickGridView它显示<GridTrader />组件和<ListTrader />组件隐藏

我已经尝试进行一些显示和隐藏此问题的引用
在ReactJS中显示/隐藏组件

但是该问题的onClick函数显示类似于切换功能。 任何想法如何解决这个问题？

您的帮助非常感谢。 谢谢。

Answer 1

这不是有效的示例，但希望能为您提供指导（如果我正确理解了您的问题），您可以保存状态字符串变量，并根据值显示所需的值。

class Traders extends Component {
  constructor(props) {
     super(props);
     this.state = {
      ....
      visibleView:'list' //'grid'
     };
  }

  componentDidMount() {}


 onToggleView(view) {
   this.setState({
    visibleView:view
  });
 }

render() {
  const widthRisk = {
    width: '60%'
  };

return (
  <div id="home">
    <div className="app-body" id="view">
      <div className="padding font-responsive">
        <Row>

  ..............
  ...............
              <Col xs={12} sm={12} md={2}>
                <div className="option-layout">
                  <ul>
                    <li>
                      <a href="#" onClick={() => this.onToggleView('list')}>
                        <img src="../../src/assets/images/list.png" className="img-respnsive" alt="list" />
                      </a>
                    </li>
                    <li>
                      <a href="#" onClick={() => this.onToggleView('grid')} >
                        <img src="../../src/assets/images/grid.png" className="img-respnsive" alt="grid" />
                      </a>
                    </li>
                  </ul>
                </div>
              </Col>
            </div>
          </Col>

        </Row>

        {
          this.state.visibleView ==='list'? <ListTrader /> : <GridTrader />
        }



        {/* <ListTrader /> */}
        {/* <GridTrader /> */}

        </div>

      </div>
    </div>