React 如何在没有 npm 的情况下创建通知

Question

我刚开始学习反应。没有类（函数式编程）可以做到这一点吗？Index.js 有一个带有 axios 调用的按钮。当答案到来时，通知应该会出现并在一秒钟内消失。应用程序.jsimport React from 'react';import {BrowserRouter, Route} from 'react-router-dom';import Index from './components/index/index';import Notifications from './components/notifications/notifications';const App = (props) => {    return (        <BrowserRouter>             <Route exact path="/" render={ () => <Index notification={ <Notifications/> } /> } />        </BrowserRouter>    );}export default App;索引.jsimport React from 'react';const axios = require('axios');const Index = (props) => {    let getData = () => {        axios.get('url')        .then(function (response) {            <Notification text={ response.data }/> );        })        .catch(function (error) {            console.log(error);        });     }    return (            <button onClick={ () => getData() }>Get data</button>    );}export default Index;通知.jsimport React  from 'react';const Notification = (props) => {    return (        <div>            <div>                <p>props.text</p>            </div>        </div>    );    //and delete after 1 second}export default  Notification;请显示功能解决方案的示例:)

Answer 1

要在屏幕上呈现通知，通常我会使用 React Portals

为此，您的 Notification 组件需要通过 Portal 渲染到 DOM

const notificationRoot = document.getElementById('notification-root'); // Create the element in your main html file in order for your notification to "portal" in

const Notification = (props) => {

    return (

        <div>

            <div>

                <p>props.text</p>

            </div>

        </div>

    );

};

const DisplayNotification = () => {

  const domNode = usememo(() => document.createElement('div'), []);

  useEffect(() => {

    notificationRoot.appendChild(domNode);

    return () => {

      notificationRoot.removeChild(domNode);

    }

  }, [])

  return ReactDOM.createPortal(

    <Notification />,

    domNode

  ); // Portal to your node

}

通过渲染DisplayNotification，您Notification应该会弹出。

Answer 2

在您的axios.then中，您可以将结果存储在状态中，并设置超时以在 1 秒后清除状态。然后，如果状态中有某些东西，则呈现通知

const Index = (props) => {

    const [text, setText] = useState();

    let getData = () => {

        axios.get('url')

            .then(function (response) {

                setText(response.data);

                setTimeout(() => setText(), 1000);

            })

            .catch(function (error) {

                console.log(error);

            });

    }

    return (

        <>

            <button onClick={() => getData()}>Get data</button>

            {text &&

                <Notification text={text} />

            }

        </>

    );

}

Answer 3

您应该使用 redux 来实现这一点，当您从 API 接收数据时，调度一个返回 true/false 布尔值的 redux 操作。

这个提案解决方案的好处是，在您开发系统后，您只需调用一个函数，然后将其发送到您的商店就可以了！！

将您<Notification />的组件放在应用程序的顶部

喜欢 ：

const App = (props) => {

    return (

       <Provider store={store}>

         <Notification />

         <BrowserRouter>

             <Route exact path="/" render={/* YOUR HOMEPAGE COMPONENT */} />

        </BrowserRouter>

       </Provider>

    );

}

请在此处查看 redux 解决方案：https ://redux.js.org/introduction/getting-started

在你的里面<Notification />

不要忘记在 redux 上连接你应该使用的connect()是 HOC（高阶组件）

import React  from 'react';

import { connect }  from 'redux'

const Notification = (props) => {

    return (

        <div>

            <div>

                <p>props.text</p>

            </div>

        </div>

    );

    //and delete after 1 second

}

const mapStateToProps = (state) => {

  /* Get your state from your store notification for example */

  return {}

}

export default connect(mapStateToProps)(Notification);