你如何改变从同一个类内部渲染的jsx块？

Question

我还在学习React的基础知识，我想做一些引起我注意的事情。 这是关于渲染两件事。 是否有可能甚至可能只更改使用函数渲染的内容，然后使用按钮或计时器单独调用函数？

这是一个示例代码，用于说明如何呈现两个完全不同的东西。 它应该呈现一个按钮，显示“State：On”或“State：Off”。 当您单击按钮时，状态会发生变化。 而且，整个渲染方法都被切换了......或者至少那是应该发生的事情。

class Flicker{
    constructor(props){
        super(props);
        this.state = {mode: "on"};
    }
    flipOn(){
        this.setState({mode: "on"})
    }
    flipOff(){
        this.setState({mode: "off"})
    }
    if (this.state.mode == "on"){
        render() {
            return(
                <button onClick={this.flipOn}>State: On</button>
            );
        }
    } else if (this.state.mode == "off"){
        render() {
            return(
                <button onClick={this.flipOff}>State: Off</button>
            );
        }
    }
}
export default Flicker;

如果这不是在应用程序上呈现jsx的这种类型的更改的正确方法，应该怎么做？

Answer 1

你有正确的想法 - 但在一个类中只有一个渲染方法。 你的逻辑确实属于渲染。 这应该做你想要的：

 class Flicker extends React.Component { constructor(props){ super(props); this.state = {mode: "On"}; } flipOn(){ this.setState({mode: "On"}) } flipOff(){ this.setState({mode: "Off"}) } render () { return ( <button onClick={(this.state.mode === 'Off') ? this.flipOn : this.flipOff}>State: {this.state.mode}</button> ) } } export default Flicker; 

Answer 2

将条件逻辑放在render（）方法中。

像这样......

 class Example extends React.Component { // the rest of your code render() { const { mode } = this.state; return( <div> {mode ==="on" && <button onClick={this.flipOn}>State: On</button> } {mode === "off" && <button onClick={this.flipOff}>State: Off</button>} </div> ) } } 

Answer 3

您的组件会更改状态。 状态是布尔值 - 是（真）还是不（假）。 由于您的状态在两个值之间切换，因此您可以使用单个方法（ toggle ）。 由于我们检查以前的状态，因此最好通过updater来设置state。

您需要通过在构造函数（方法4）中使用bind或通过实例方法（方法5）使用箭头函数将方法绑定this方法。

现在在（单个）渲染中，您只需要根据on的状态更改text ：

 class Flicker extends React.Component{ state = { on: true }; toggle = () => this.setState(({ on }) => ({ on: !on })); render() { const text = this.state.on ? 'On' : 'Off'; return ( <button onClick={this.toggle}>State: {text}</button> ); } } ReactDOM.render( <Flicker />, demo ); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="demo"></div> 

现实世界的例子

按钮也许应该得到on ，并toggle通过道具。 现在，他们可用之外，和闪烁的唯一关心的是调用toggle根据当它被点击，并改变文字on ：

 const Toggler = ({ on, toggle }) => ( <button onClick={toggle}> State: {on ? 'On' : 'Off'} </button> ); class Flicker extends React.Component { state = { on: true }; toggle = () => this.setState(({ on }) => ({ on: !on })); render() { const { on } = this.state; return ( <div> <Toggler toggle={this.toggle} on={on} /> {on && 'I\\'m displayed only when I\\'m On' } </div> ); } } ReactDOM.render( <Flicker />, demo ); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="demo"></div>