Question

React相当新，在更改父状态后让子组件重新呈现时会遇到一些问题。当我console.log子组件时，我可以看到从父级传入的更新属性，但是在setState之后，子组件不会重新呈现。我什至尝试调用forceUpdate（我知道这不是首选方法），但仍然没有重新渲染。

Parent component:

export default class MainPanel extends React.Component {    
    constructor(props) {
        super(props);

        this.state = {
            preview: false,
        }
    }

     togglePreview = () => {
        this.setState({
            preview: !this.state.preview
        });
    }

    render() {
        return (
            <Layout className='section'>
                <Sider width={220} 
                    collapsedWidth={100}
                    collapsible
                    trigger={null}                  >
                    <Scrollbar noDefaultStyles={false}>
                        <SidebarMenu />
                    </Scrollbar>
                </Sider>
                <Divider type="vertical" className='divider vertical-divider' />
                <Layout className='section'>
                    <Header
                        preview={this.state.preview}
                        togglePreview={() => this.togglePreview()}
                    />
                    <Content preview={this.state.preview} />

                    <Footer>
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}

Child component:

export default class Content extends React.PureComponent<ISectionProps, IBarProps> {
    constructor(props?:any) {
        super(props);
        this.state = {
          preview: props.preview,
          size: 7,
        };
    }

    componentWillReceiveProps(nextProps:any) {
        this.setState({ preview: nextProps.preview });
        console.log('nextProps: ' + nextProps.preview);
    }

    render()
    {
        return (
            <div id='content' className='layout-content'>
                <div className='content-wrapper'>
                    <Container className='content-container'>
                        <Section className='workspace' 
                            minSize={100}>
                            <Workspace />
                        </Section>
                        <Bar className='resizer' size={7} />
                        <Section className='preview' 
                            minSize={0} 
                            defaultSize={this.state.preview ? 1000 : 0 }>
                        </Section>
                    </Container>
                </div>
            </div>
        )
    }
}

父方法togglePreview（）更新<Content preview={this.state.preview} />中的绑定，子方法componentWillReceiveProps（）正确记录绑定到defaultSize = {this.state.preview的更新的true / false值？ 1000：0}>返回。除了未使用更新的defaultSize重新呈现组件以外，其他所有内容似乎都可以正常工作。我还尝试了在父组件和子组件中都将forceUpdate（）用作回调，但这也不起作用。

任何帮助我都非常愿意。

Answer 1

它不会更新，因为您在构造函数中设置了状态，并且构造函数只运行一次。直接从道具访问值。

 <Section className='preview' 
   minSize={0} 
   defaultSize={this.props.preview ? 1000 : 0 }>

设置状态后不重新渲染子组件

1 个答案: