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

Question

我刚开始学习反应。没有类（函数式编程）可以做到这一点吗？Index.js 有一个带有 axios 调用的按钮。当答案到来时，通知应该会出现并在一秒钟内消失。

应用程序.js

import 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;

索引.js

import 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;

通知.js

import 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 渲染到 DOMconst notificationRoot = document.getElementById('notification-root'); // Create the element in your main html file in order for your notification to "portal" inconst Notification = (props) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>props.text</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );};const DisplayNotification = () => {&nbsp; const domNode = usememo(() => document.createElement('div'), []);&nbsp; useEffect(() => {&nbsp; &nbsp; notificationRoot.appendChild(domNode);&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; notificationRoot.removeChild(domNode);&nbsp; &nbsp; }&nbsp; }, [])&nbsp; return ReactDOM.createPortal(&nbsp; &nbsp; <Notification />,&nbsp; &nbsp; domNode&nbsp; ); // Portal to your node}通过渲染DisplayNotification，您Notification应该会弹出。

Answer 2

在您的axios.then中，您可以将结果存储在状态中，并设置超时以在 1 秒后清除状态。然后，如果状态中有某些东西，则呈现通知const Index = (props) => {&nbsp; &nbsp; const [text, setText] = useState();&nbsp; &nbsp; let getData = () => {&nbsp; &nbsp; &nbsp; &nbsp; axios.get('url')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText(response.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => setText(), 1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch(function (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => getData()}>Get data</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {text &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Notification text={text} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; );}

Answer 3

您应该使用 redux 来实现这一点，当您从 API 接收数据时，调度一个返回 true/false 布尔值的 redux 操作。这个提案解决方案的好处是，在您开发系统后，您只需调用一个函数，然后将其发送到您的商店就可以了！！将您<Notification />的组件放在应用程序的顶部喜欢 ：const App = (props) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp;<Provider store={store}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Notification />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<BrowserRouter>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Route exact path="/" render={/* YOUR HOMEPAGE COMPONENT */} />&nbsp; &nbsp; &nbsp; &nbsp; </BrowserRouter>&nbsp; &nbsp; &nbsp; &nbsp;</Provider>&nbsp; &nbsp; );}请在此处查看 redux 解决方案：https ://redux.js.org/introduction/getting-started在你的里面<Notification />不要忘记在 redux 上连接你应该使用的connect()是 HOC（高阶组件）import React&nbsp; from 'react';import { connect }&nbsp; from 'redux'const Notification = (props) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>props.text</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; &nbsp; //and delete after 1 second}const mapStateToProps = (state) => {&nbsp; /* Get your state from your store notification for example */&nbsp; return {}}export default connect(mapStateToProps)(Notification);