React.js 切换显示

Question

我正在尝试使用 React.js 中的按钮切换页面上的内容如果我按下按钮，我希望内容消失。 如果我再次按下它，我希望内容再次出现。 我尝试了所有我能想到的方法，但似乎没有任何效果。 我最初尝试使用三元语句来查看是否可以切换，但它只会破坏我的应用程序。 有人能告诉我如何改进项目的这一部分吗？ 这是我所拥有的：

//App.js


import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isToggle: false
    };
  }

  handleClick(e) {
    this.setState({ !isToggle ? isToggle: true : isToggle: false });
  }

  render() {

    const style = {
      display: none
    };

    return (
      <div>
        <h1 className="text-xs-center">List of items:</h1>
        <button onClick={this.handleClick.bind(this)} className="btn btn-primary">Toggle</button>
        <div className="container" style={!isToggle ? style.display = none : style.display = block}>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
        </div>
      </div>
    );
  }
}

export default App;

基本上，我想切换项目 1、项目 2、项目 3、项目 4。

Answer 1

如果我要组成组件，这将是它的形状。

import React, { Component } from 'react';

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

  handleClick(e) {
    this.setState({isToggle: !this.state.isToggle});
  }

  render() { 
    return (
      <div>
        <h1 className="text-xs-center">List of items:</h1>
        <button
          className="btn btn-primary"
          onClick={this.handleClick}
        >
          Toggle
        </button>
        <div
          style={{display: this.state.isToggle ? 'block': 'none'}}
          className="container"
        >
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
        </div>
      </div>
    );
  }
}

export default App;

Answer 2

您可以使用条件渲染代替 CSS：

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isVisible: false
    };
    this.onToggle = this.onToggle.bind(this);
  }

  onToggle(e) {
    this.setState({isVisible: !this.state.isVisible});
  }

  render() {    
    return (
      <div>
        <h1 className="text-xs-center">List of items:</h1>
        <button onClick={this.onToggle} className="btn btn-primary">Toggle</button>

        {this.state.isVisible &&
          <div className="container">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
          </div>
        }
      </div>
    );
  }
}

export default App;

Answer 3

试试我的方法

import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow: false
        };
    }

    handleClick(e) {
        this.setState({
            isShow: !this.state.isShow
        });
    }

    getComponent() {
        if (this.state.isShow) {
            return (
                <div className="container">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </div>
            )
        }

        return '';
    }

    render() {
        return (
            <div>
                <h1 className="text-xs-center">List of items:</h1>
                <button onClick={this.handleClick.bind(this)} className="btn btn-primary">Toggle</button>
                {this.getComponent()}
            </div>
        );
    }
}
export default App;

Answer 4

改变这一行..

        <div className="container" style={!isToggle ? style.display = none : style.display = block}>

到...

<div className="container" style={!isToggle ? {display:'none'} : {display: 'block'}} >

内联 'style' 应该返回一个 JSON 对象 {{key: 'value, key2': 'value2'}}。

Answer 5

因为您尝试将 style.display 分配给 HTML 中的 style 属性，这是错误的，更改该部分，它应该都能正常工作，请尝试以下操作：

//App.js


import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isToggle: false
    };
  }

  handleClick(e) {
    this.setState({ !isToggle ? isToggle: true : isToggle: false });
  }

  render() {

    const style = {
      display: none
    };

    return (
      <div>
        <h1 className="text-xs-center">List of items:</h1>
        <button onClick={this.handleClick.bind(this)} className="btn btn-primary">Toggle</button>
        <div className="container" style={!isToggle ? {display:'none'} : {display: 'block'}}>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
        </div>
      </div>
    );
  }
}

export default App;

有关样式如何工作的更多信息，请查看以下链接：

https://www.codecademy.com/articles/html-inline-styles

Answer 6

您可以使用箭头函数来做到这一点。 在我看来，更简单、更干净。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isToggle: false};
  }

  render() { 
    return (
      <div>
        <h1 className="text-xs-center">List of items:</h1>
        <button
          className="btn btn-primary"
          onClick={ () => this.setState({ isToggle: !this.state.isToggle }) }
        >
          Toggle
        </button>
        <div
          style={{display: this.state.isToggle ? 'block' : 'none'}}
          className="container"
        >
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
        </div>
      </div>
    );
  }
}

export default App;