Блог

Главная - Вопросы по программированию - как передать результат от одного компонента к другому с помощью крючков reactjs?

как передать результат от одного компонента к другому с помощью крючков reactjs?

#javascript #reactjs #react-hooks

Вопрос:

У меня есть два компонента: в первом есть кнопка подсчета, а во втором будет отображаться результат

 import React, { useState } from 'react';

function Count() {

  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count   1)}>
        Click me
      </button>
    </div>
  );
}

и теперь мне нужно отобразить результат внутри другого компонента:

 import React, { useState } from 'react';

import Count from './Count'

function Result() {

  return <p>You clicked {count} times</p>;

}

и это не работает, как это решить?

Комментарии:

1. Это фундаментальное непонимание того, что такое компоненты и как их можно использовать. Вы могли бы подумать о том, чтобы пройти несколько учебных пособий по React, чтобы лучше понять основы.

Ответ №1:

крючки реакции не разделяют состояние между компонентами. но структура, которую вы объяснили, может быть легко достигнута несколькими способами. чтобы реализовать его без использования внешних библиотек, вы можете использовать API react context

 const NumberContext = React.createContext();
 
   const [count, setCount] = useState(0);
  <Counter.Provider value={[count, setCount]}>
    <Count />
    <Result />
  </Counter.Provider>,

и в ваших компонентах вместо useState используйте

 const [count, setCount] = useContext(NumberContext);
Метки: