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()
    );
}

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

1 个答案: