Question

import { Component } from 'react'

export default class Overlay extends Component {

    static propTypes = {
       show: React.PropTypes.bool
    };

    constructor(props, context) {
        super(props);
    }

    render() {
        const { show } = this.props;
        return (
            <div id="overlay">
                    {show &&
                        this.props.children
                    }
            </div>
        )
    }
}

上面是我的叠加组件，我尝试不使用来自npm的任何预制组件，因为我想了解更多有关反应的内容。孩子们被渲染后我该怎么办？

在其他组件的某个地方我做<Overlay show={true} />，现在我想在渲染子项后做一些事情。我试过了

componentDidMount(){
    console.log('hey');
}

在叠加组件中，它会在用户触发叠加后第一次触发。

Answer 1

您可以使用componentWillReceiveProps生命周期方法 - 这会收到＆＃34; new＆＃34;道具被发送到组件，以便您可以看到是否有任何更改。保证在道具传递给您的组件时随时调用，但是，当道具没有改变时也可以调用它，因此有必要手动检查您感兴趣的道具是否有用。已经改变了。

（如果您不在那里做任何事情，也可以删除构造函数）

import { Component } from 'react'

export default class Overlay extends Component {

    static propTypes = {
       show: React.PropTypes.bool
    };

    componentDidMount() {
        console.log("The componentDidMount method is only fired the first time the component is mounted");

    componentWillReceiveProps(nextProps) {
        // this will run every time the props change - and possibly in addition to this, so we need to check for prop changes
        if (this.props.show !== nextProps.show) {
            console.log("The show prop changed!);
        }
    }

    render() {
        const { show } = this.props;
        return (
            <div id="overlay">
                    {show &&
                        this.props.children
                    }
            </div>
        )
    }
}

在模态/覆盖反应组件

1 个答案: