React.js Umschalten der Anzeige

Question

Ich versuche, einen Inhalt auf meiner Seite mit einer Schaltfläche in React.js zu wechseln Wenn ich die Schaltfläche drücke, möchte ich, dass der Inhalt verschwindet. Wenn ich es erneut drücke, möchte ich, dass der Inhalt wieder erscheint. Ich habe alles versucht, was mir einfällt, aber nichts scheint zu funktionieren. Ich versuchte zunächst eine ternäre Anweisung, um zu sehen, ob ich umschalten kann, aber es bricht nur meine Anwendung. Kann mir jemand sagen, wie ich diesen Teil des Projekts verbessern kann? Hier ist, was ich habe:

//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; 

Grundsätzlich möchte ich den Punkt 1 wechseln, Punkt 2, Punkt 3, Punkt 4.

Answer 1

Dies wäre seine Form, wenn ich die Komponente bilden würde.

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

Versuchen Sie, meine Art und Weise

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 3

Ändern Sie diese Zeile.

.

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

zu ...

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

Inline 'style' sollte ein JSON-Objekt zurückgeben {{key: 'value, key2': 'value2'}}.

Answer 4

Becuase versuchen Sie einen style.display zu Stil-Attribut in HTML zuweisen, es ist falsch, dass ein Teil ändern und es sollten alle arbeiten, versuchen Sie dies unter:

//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; 

Für weitere Informationen darüber, wie Stil funktioniert, schauen Sie auf den folgenden Link:

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