javascript - 你如何改变从同一个类中渲染的 jsx block ？

Question

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

这是一个示例代码，展示了它如何渲染两个完全不同的东西。它应该呈现一个按钮，上面写着“状态:开”或“状态:关”。当您单击按钮时，状态会发生变化。而且，整个渲染方法都被切换了……或者至少这是应该发生的事情。

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;