javascript - 如何在不强制更新的情况下让 react 组件重新渲染？

Question

我试图通过构建一个简单的网络应用程序来学习 react ，用户可以在其中上传图像并对它们应用不同的效果。我遇到了一些障碍。我试图弄清楚如何在用户单击其中一种效果后重新渲染图像容器。我读到了forceupdate，但不建议使用。这是我的代码:

import React, { Component } from 'react';

import ImageContainer from './components/image_container';
import AppliedContainer from './components/applied_container';
import UnappliedContainer from './components/unapplied_container';

class App extends Component {

constructor(props) {
    super( props );
    this.state = {
        transform :  false  ,
        rotate : false  ,
        scale : false   ,
        opacity : false 
    }

};


render() {
    return (
        <div className="row">
            <ImageContainer onChange={this.state} />
            <UnappliedContainer types={this.state} onSelect={ state => 
     this.setState(state) }/>
            <AppliedContainer types={this.state} onSelect={ state => 
     this.setState(state) }/>             
        </div>
    );
}

}

export default App;

谢谢大家!

Answer 1

这取决于 onChange 在 ImageContainer 内部执行的操作。如果你想重新渲染 ImageContainer，那么 ImageContainer 内部的 onChange 可以调用 this.setState 将 ImageContainer 的状态设置为其新的 props。

您还可以使用 componentWillRecieveProps 或 componentShouldUpdate 生命周期方法来触发重新渲染。

http://busypeoples.github.io/post/react-component-lifecycle/