Question

我有一个父组件和两个子组件。我试图创建一个按钮，单击该按钮将打开一个对话框。因此，我将按钮和对话框作为父组件的2个子组件。我试图更改父组件的状态，使其变为：单击按钮时，displayNewTileDialog，这将导致父组件重新呈现，并将此值传递给对话框组件。但对话框组件未重新呈现。

我将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将永远不会更改，也不会发生重新呈现。

React Update父组件状态不会重新渲染子组件

1 个答案: