Реагируйте, как создавать уведомления без npm - PullRequest
Новая
       3

Реагируйте, как создавать уведомления без npm

0 голосов
/ 29 апреля 2020

Привет, я только начал учиться реагировать. Можно ли сделать это без занятий (функциональное программирование)? Индекс. js имеет кнопку с топором ios. Когда ответ пришел, уведомление должно появиться и исчезнуть через секунду.

Приложение. 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;

Пожалуйста, приведите примеры функциональных решений:)

Ответы [ 3 ]

0 голосов
/ 29 апреля 2020

В вашем 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} />
            }
        </>
    );
}
0 голосов
/ 29 апреля 2020

Чтобы вывести уведомление на экране, обычно я использую React Portals

Для того, чтобы компонент Notification должен был отображаться в DOM через Portal 

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 должен всплыть.

0 голосов
/ 29 апреля 2020

Для достижения этой цели следует использовать избыточность, когда вы получаете данные от API, отправьте действие избыточности, которое возвращает логическое значение true / false.

Преимущество этого решения для предложения: после разработки системы вам нужно вызвать только одну функцию и отправить ее в ваш магазин, вот и все !!

Поместите ваш <Notification /> компонент на вершину вашего приложения

Как: 

const App = (props) => {
    return (
       <Provider store={store}>
         <Notification />
         <BrowserRouter>
             <Route exact path="/" render={/* YOUR HOMEPAGE COMPONENT */} />
        </BrowserRouter>
       </Provider>
    );
}

Пожалуйста, посмотрите решение для редукции здесь: https://redux.js.org/introduction/getting-started

Внутри вашего <Notification />

Не забудьте подключиться на избыточном, вы должны использовать connect() - это HO C (High Order Component) 

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);
...