时间戳

首页 > 解决方案 > 如何将更改状态道具传递给组件？

javascript - 如何将更改状态道具传递给组件？

问题描述

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

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

它在默认状态下工作正常（因此，如果 isEdit 按预期为真或假，我确实会在开头看到预期的结果），但如果我更改父对象中的状态，内容不会改变。

有什么想法可以管理子组件以即时更改吗？

以下是我更改状态的方法：

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;

标签： javascriptreact-nativeexporeact-props

解决方案

this.isEdit = props.isEdit??true;

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

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

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

推荐阅读