Javascript 如何在没有forceupdate的情况下让react组件重新加载？

我试图通过构建一个简单的web应用程序来学习react，用户可以上传图像并对其应用不同的效果。我碰到了一点路障。我正试图找出在用户单击其中一个效果后如何重新渲染imagecontainer。我读过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;

import React，{Component}来自'React'；
从“./components/image_container”导入ImageContainer；
从“./components/AppliedContainer”导入AppliedContainer；
从“./components/unapplied_container”导入未应用的容器；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
变换：假，
旋转：假，
比例：假，
不透明度：假
}
};
render（）{
返回(
this.setState（state）}/>
this.setState（state）}/>
);
}
}
导出默认应用程序；

---

谢谢大家

这取决于onChange在ImageContainer中所做的操作。如果要重新渲染ImageContainer，则ImageContainer内部的onChange可以调用this.setState将ImageContainer的状态设置为其新的props

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

---

这取决于onChange在ImageContainer中所做的操作。如果要重新渲染ImageContainer，则ImageContainer内部的onChange可以调用this.setState将ImageContainer的状态设置为其新的props

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

---

根据React的性质，在不使用forceUpdate的情况下更新组件会改变您的状态

我真的不明白你在这里传递什么作为道具（onChange），它不应该是一个函数，而不是你的state对象吗

在我看来，您应该在应用程序组件中创建一些函数，在该函数中，您通过this.setState（{…}）更改您的状态，然后将该函数作为道具传递到子组件中。此外，还请记住将该函数绑定到应用程序组件中

---

由于您是React新手，您是否介意也编写其他组件的代码，并告诉我您对所有组件的行为有何要求，以便我们可以一起找到最佳方式

根据React的性质，在不使用forceUpdate的情况下更新组件会改变您的状态

我真的不明白你在这里传递什么作为道具（onChange），它不应该是一个函数，而不是你的state对象吗

在我看来，您应该在应用程序组件中创建一些函数，在该函数中，您通过this.setState（{…}）更改您的状态，然后将该函数作为道具传递到子组件中。此外，还请记住将该函数绑定到应用程序组件中

---

由于您是新的反应者，您是否介意同时编写其他组件的代码，并告诉我您希望所有组件的行为是什么，因此，我们可以一起找到最佳方法

只需将图像源附加到状态属性，并根据您的逻辑更新该状态属性。只需将图像源附加到状态属性，并根据您的逻辑更新该状态属性。

<ImageContainer onChange={this.state} />