Inline-Stile in ReactJS

Question

Ich bin neu in ReactJS. Ich habe versucht, gleichzeitig den Text und die Farbe einer Schaltfläche zu ändern, wenn ich darauf klicke. Dieser Code funktioniert:

class ToggleHelp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isHelpOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isHelpOn: !prevState.isHelpOn 
    })); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
     </button> 
    ); 
    } 
} 

ReactDOM.render(
    <ToggleHelp />, 
    document.getElementById('root') 
); 

Aber wenn ich versuche, einen Inline-Stil wie die folgenden aplly, Code nicht mehr funktioniert.

<button style={background:yellow} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

Ich habe mehrere Male versucht, es auf verschiedene Arten zu tun. Ich möchte, dass es für den Moment ein Inline-Stil ist. Ist es möglich, Inline-Stile direkt von React anzuwenden? Wenn ja, besteht die Idee darin, den Status auszuwerten und über eine bedingte Anweisung eine Farbe auf eine andere zu setzen.

Answer 1

Erklären Sie Ihren Inline-Stil als Objekt:

<button style={{ background: 'yellow' }} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

Answer 2

Sie sind eine Reihe von Klammern fehlen und einige Zitate:

<button style={{background: 'yellow'}} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

Stil prop Reagieren ein Objekt ({background: 'yellow'}) erwartet und da es nicht eine einfache Zeichenfolge, benötigen Sie den zusätzlichen Satz von Klammern um die Stütze {{...}}.

Answer 3

Sie müssen es in einem anderen {} wickeln:

<button style={{background:'yellow'}} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button> 

Der äußere Satz von {} s erzählt nur die JSX-Compiler, der im Inneren, was JavaScript-Code ist. Der innere Satz {} s erstellt ein JavaScript-Objektliteral.

Answer 4

Zunächst einmal muss sein.

Zweitens - css-Wert muss ein String sein.

style={{ background: 'yellow' }}