如何在沒有forceupdate的情況下讓反應組件重新渲染？

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（{...}）改變你的狀態，然后你將這個函數作為props傳遞給你的子組件。 此外，還請記住將該功能綁定到App組件中

由於您是React的新手，您是否也介意編寫其他組件的代碼，並告訴我您對所有組件的行為有什么要求，以便我們可以一起找到最好的方法