如何將變化的狀態道具傳遞給組件？

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