如何将不断变化的状态道具传递给组件？

Question

我有一个名为 isEdit 的状态对象。我有一个 StyledLessons 列表（一个具有功能的组件，如果它是否处于编辑模式，它应该有所不同）。

<StyledLesson title={title} subjectName={subjectName} subtitle={subtitle} isEdit={this.state.isEdit}/>

它在默认状态下工作正常（所以如果 isEdit 是 true 或 false，我确实在开始时看到了预期的结果）但是如果我在父对象中更改我的状态，内容不会改变。

关于如何管理子组件以动态更改的任何想法？

这是我改变状态的方法：

this.state.isEdit ?
                            <Icon
                                name='check'
                                color={Colors.tabBarText}
                                onPress={() => this.setState({isEdit: false})}
                            />
                            :
                            <Icon
                                name='edit'
                                color={Colors.tabBarText}
                                onPress={() => this.setState({isEdit: true})}
                            />

子组件代码：

class StyledLesson extends React.PureComponent {

    constructor(props) {
        super(props);

        this.isEdit = props.isEdit??true;
        this.state = {expanded: false};
    }

    getEditableView() {
        return (
            <View style={{flexDirection: 'row', flex: 1, alignItems: 'center', marginHorizontal: 10}}>
                <TouchableOpacity>
                    <Icon
                        name={'remove-circle'}
                        color={'#f00'}
                    />
                </TouchableOpacity>
                <TouchableOpacity style={{flex: 1}}>
                    <FlatCard>
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.title}</Text>
                        <Text
                            style={{
                                fontWeight: 'bold',
                                fontSize: 35,
                                color: Colors.textColor
                            }}>{this.props.subjectName}</Text>
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.subtitle}</Text>
                    </FlatCard>
                </TouchableOpacity>
            </View>
        );
    }

    getDisplayView() {
        return (
            //Normal View
            <View style={{flexDirection: 'row', flex: 1, alignItems: 'center', marginHorizontal: 10}}>
                <TouchableOpacity
                    onPress={
                        () => {
                            this.setState({expanded: !this.state.expanded});
                        }
                    }
                    style={{flex: 1}}
                >
                    <FlatCard>

                        {this.state.expanded &&
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.title}</Text>
                        }
                        <Text
                            style={{
                                fontWeight: 'bold',
                                fontSize: 35,
                                color: Colors.textColor
                            }}>{this.props.subjectName}</Text>
                        {this.state.expanded &&
                        <Text style={{color: '#666', fontSize: 18}}>{this.props.subtitle}</Text>
                        }
                    </FlatCard>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            this.isEdit ? this.getEditableView() : this.getDisplayView()
        );
    }
}

export default StyledLesson;

Answer 1

this.isEdit = props.isEdit??true;

这就是问题所在。您仅在构造函数内更新此属性。如果 props 值发生变化，属性不会发生变化。

您可以尝试将渲染方法修改为类似

render() {
    return (
        (this.props.isEdit??true) ? this.getEditableView() : this.getDisplayView()
    );
}

如何将不断变化的状态道具传递给组件？

How to pass changing state prop to component?

javascript

react-native

expo

react-props