Question

我正在尝试为应用程序开发一种编辑模式。
在编辑模式下，某些按钮的透明度应较低。
如果编辑模式处于活动状态，则存储一个布尔变量。该变量使用prop向下传递给其子级。

如果现在我在父状态下更改editMode，则不会重新渲染子级。

父类：

export default class Parentclass extends Component{
   constructor(props){
        super(props);
        this.state = {
            editMode: false,
        };
    }
    render(){
        return(
            <View>
                <EditButtonClass onEditPress={() => this.editButtonPress()}/>
                <View>
                    <Subclass editMode={this.state.editMode}/>
                </View>
            </View>
        );
    }
    editButtonPress(){
        this.setState({editMode: true})
    }

}

子类：

export default class Subclass extends Component{
    render(){
        return(
            <View>
                <Finalsubclass editMode={this.props.editMode}/>
            </View>
        );
    }
}

最终子类：

export default class Finalsubclass extends Component{
    createStyle(){
        return{
            opacity: this.props.editMode ? 0.5 : 1,
        }
    }

    render(){
        return(
            <TouchableOpacity style={this.createStyle()}/>
        );
    }
}

按钮：

<TouchableOpacity onPress={() => this.props.onEditPress()}>
    <Image source={require('../res/edit-button.png')} style=styles.editButton}/>
</TouchableOpacity>

道具中的editMode确实发生了变化。如果我单击其中一个按钮，它们会变亮。但是，如果我启用了editmode，则不会直接进行。

实现完全重新渲染的最佳方法是什么？

Answer 1

您可以让用户对生命周期做出反应以重新渲染组件

https://reactjs.org/docs/react-component.html

对于上述问题，您可以使用

componentWillReceiveProps(nextProps) {
    ...
}

Answer 2

解决方案是围绕TouchableOpacity构建一个View并将样式应用于该视图。

Answer 3

不推荐使用componentWillReceiveProps，我建议使用componentDidUpdate。

要回答评论中的问题，您需要将prevProps与新的一起检查，以免出现无限循环。

例如：

componentDidUpdate = (prevProps) => {
    if(prevProps!==this.props){  /if the previous props are different from the current props
    //do what you need
    }
}

因为它是一个对象，所以如果您只需要检查一个变量，则只需执行以下操作即可：

if (prevProps.foo !== this.props.foo) {
    //do what you need
}

道具更改时，React不重新渲染

3 个答案: