Изменить контейнер при помощи функции из любой функции

Рейтинг: 0Ответов: 1Опубликовано: 23.08.2023

Сложный вопрос для меня. У меня есть контейнер в index.js и я хочу изменить его с помощью функции из любого скрипта. В react-toastify есть такая задумка toast.error('MANY_REQUESTS') и контейнер в index.js

root.render(
  <>
    <App />
    <ToastContainer />
  </>
)
javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

есть часть кода с данным примером?

Вот пример с контекстом...

Сам контекст можно подключать в компоненте App, а так же любом его дочернем компоненте и менять данные контекста. Все эти изменения будут отображаться в компоненте ToastContainer.

Со стейт-менеджерами (mobx или zustand) кода наверное будет поменьше... :)

const MyContext = React.createContext({});

//
function Data({children}) {
  const [txt, setTxt] = React.useState('Тест')
  return <MyContext.Provider value={{text: txt, act: setTxt}}>
    {children}
  </MyContext.Provider>
}
//
function App() {
  const {act} = React.useContext(MyContext)
  const [val, setVal] = React.useState('')
  return <div>
    <input value={val} onChange={e => setVal(e.target.value)} />
    <button onClick={_ => act(val)}>Изменить</button>
  </div>
}
//
function ToastContainer() {
  const {text} = React.useContext(MyContext)
  return <div>
    {text}
  </div>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(
  <Data>
    <App />
    <ToastContainer />
  </Data>
);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>