reactjs - React更新父组件状态不会重新渲染子组件

Question

我有一个父组件和两个子组件。我正在尝试创建一个按钮，单击该按钮将打开一个对话框。因此，我将按钮和对话框作为父组件的 2 个子组件。我试图更改父组件的状态，使其成为:单击按钮时显示NewTileDialog，这将导致父组件重新渲染，并将该值传递给对话框组件。但对话框组件不会重新渲染。

我正在使用 TypeScript 和 React，而不是使用 Redux。

父组件:

export default class TilesRootComponent extends React.Component<ITilesRootProps, ITilesRootState>{
    constructor(props: ITilesRootProps, state: ITilesRootState) {
        super(props)
        this.state = {
            displayNewTileDialog: false
        }
    }

    onClickNewTile(): void {
        this.setState({
            displayNewTileDialog: true
        })
    }

    onHideNewTileDialog(): void {
        this.setState({
            displayNewTileDialog: false
        })
    }

    render(): JSX.Element {
        return (
            <div className="tilesRootComponent">
                <div className="ms-Grid" dir="ltr">
                    <div className="ms-Grid-row">
                        <AddNewButtonComponent buttonText="New Tile" onButtonClick= {() => this.onClickNewTile()} />
                    </div>
                    <div className="ms-Grid-row">

                    </div>
                </div>
                <NewTileDialogComponent displayNewTileDialog = {this.state.displayNewTileDialog} onHideNewTileDialog = { () => this.onHideNewTileDialog()}/>
            </div>
        )
    }
} 

按钮组件:

export default class AddNewButtonComponent extends React.Component<IAddNewButtonProps, IAddNewButtonState>{
    constructor(props: IAddNewButtonProps, state: IAddNewButtonState) {
        super(props)
    }

    render(): JSX.Element {
        return (
            <div className="addNewButtonComponent">
                <CommandButton
                    data-automation-id="test"
                    iconProps={{ iconName: 'Add' }}
                    text={this.props.buttonText}
                    onClick={() => this.props.onButtonClick()} />
            </div>
            )
        }
}

我的对话框组件是:

export default class NewTileDialogComponent extends React.Component<INewTileDialogProps, INewTileDialogState>{
    constructor(props: INewTileDialogProps, state: INewTileDialogProps) {
        super(props)
        this.state = {

            tileName: '', 
            tileImageUrl: '', 
            tileOrder: ''
        }
    }

    saveTile() : void {
        let result = `Tile name: ${this.state.tileName} \nimage url: ${this.state.tileImageUrl} \norder: ${this.state.tileOrder}`
        alert(result)
    }

    render(): JSX.Element {
        return (
            <div className="newTileDialogComponent">
                <Dialog
                    isOpen={this.props.displayNewTileDialog}
                    // onDismiss={this._closeDialog}
                    type={DialogType.largeHeader}
                    title='Add/Edit Tile'
                    subText='Modify or Add tile info in the below form: '>
                        <TextField label="Tile Name" value ={this.state.tileName} onChanged = {(newVal) => this.setState({ 'tileName': newVal})}/>
                        <TextField label="Image Url" value = {this.state.tileImageUrl} onChanged = {(newVal) => this.setState({ 'tileImageUrl': newVal})}/>
                        <TextField label="Order" value = {this.state.tileOrder} onChanged = {(newVal) => this.setState({ 'tileOrder': newVal})} /> 
                        <Button text="Submit" className={commonStyles.defaultButton } onClick = {() => this.saveTile()} />
                        <Button text="Discard" onClick = {() => this.props.onHideNewTileDialog()}/>
                </Dialog>
            </div>
        )
    }
}

我的理解是，当改变父组件的状态时，应该渲染所有的子组件。这种情况我需要做什么？

Answer 1

您需要通过onDismiss支持<Dialog /> :

<div className="newTileDialogComponent">
    <Dialog
        isOpen={this.props.displayNewTileDialog}
        onDismiss={this.props.onHideNewTileDialog}
        type={DialogType.largeHeader}
        // ...
    />
    </Dialog>
</div>

如果不调用它，this.props.displayNewTileDialog永远不会改变，也不会发生重新渲染。