Question

鉴于下面的代码，我希望transform()方法可以随时this.props.code更改运行。

class Editor extends Component {
    render() {
        return (
            <div id="pseudo-editor" />
        );
    }

    transform() {
        var editor = ace.edit("pseudo-editor");
        editor.setValue(this.props.code,1);
    }
}

我正在使用react-redux和状态来支持绑定工作。

但我不太确定如何处理方法绑定。我想它不是在render方法中适合我的JS代码编辑器API调用的替代方法。可能是一个简单的解决方案，但无法找到这里使用哪种模式的示例。感谢任何帮助。

Answer 1

使用componentWillReceiveProps生命周期方法，只要在道具值发生任何变化时就会调用它，如果它们不相同，请检查previous和nextProps值，并调用transform方法。

像这样：

componentWillReceiveProps(nextProps){
    if(this.props.code != nextProps.code)
        this.transform();
}

根据 DOC ：

在安装的组件之前调用componentWillReceiveProps（）收到新的道具。如果您需要更新状态以响应 prop更改（例如，重置它），您可以比较this.props 和nextProps并使用this.setState（）执行状态转换这种方法。

绑定方法来反应状态变化

1 个答案: