Question

我试图通过构建一个简单的Web应用程序来学习反应，用户可以上传图像并对其应用不同的效果。我打了一个路障。我试图弄清楚在用户点击其中一个效果后如何重新渲染图像容器。我读过有关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的状态设置为它的新道具。

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

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

Answer 2

根据React的性质，不使用forceUpdate更新组件就是改变你的状态

<ImageContainer onChange={this.state} />

我真的不明白你在这里传递的是道具（onChange），它不应该是一个函数，而不是你的状态对象吗？

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

由于您是React的新手，您是否也介意编写其他组件的代码，并告诉我您对所有组件的行为有什么要求，以便我们能够找到最好的方法

如何在没有forceupdate的情况下让反应组件重新渲染？

2 个答案: