Question

嗨，我正在尝试实现toasterNotificationcards，当用户保存项目时会显示item saved successfully

以下是我正在使用的componentWillReceiveProps代码，我尝试使用static getDerivedStateFromProps()时已弃用，但没有用，我在按钮NotificationCard上调用onclick然后点击十字按钮即可将其关闭

假设关闭按钮不应位于父组件中（无论哪个调用componentWillReceiveProps），如何删除notificationcomponent 有效的小提琴链接working fiddle link

 import * as React from 'react';


    class Notification extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: true,
            };
        }

        componentWillReceiveProps(props) {
            this.setState({ open: props.show });
            setTimeout(this.handleClick.bind(this), 8000);
        }

        handleClick() {
            this.setState({ open: false });
        }

        componentDidMount() {
            setTimeout(this.handleClick.bind(this), 8000);
        }

        render() {
            console.log('render')
            if (!this.state.open) {
                return null;
            }

            return (
                <div>
                    <div className="cls--btn" onClick={() => this.handleClick()}>
                        &#10006;
                    </div>
                    <div>Item saved successfully</div>
                </div>
            );
        }
    }

    export default Notification;

调用通知的父组件

    import React, {Component} from 'react';
    import NotificationCard from './Notificationcard'
    import { sleOnCreationMessages } from '../../configs/messages/messages';
    class Test extends Component {


        handleClick(){
            this.setState({show: true})
        }

        render(){
            return(
                <div>
                    <button onClick={this.handleClick.bind(this)}>click</button>
                    <NotificationCard
                        notificationProps={sleOnCreationMessages.error}
                        show={true}
                    />

                </div>


            )
        }
    }

    export default Test

在反应中实施烤面包机通知

0 个答案: