主页 / 问题 / 1537242
Accepted
Sergey Pomazan
Asked:2023-08-23 18:40:47 +0000 UTC2023-08-23 18:40:47 +0000 UTC

使用任意函数中的函数修改容器

  • 772

对我来说这是个难题。我在 index.js 中有一个容器，我想使用任何脚本中的函数来更改它。React-toastify有这个想法toast.error('MANY_REQUESTS')，并且在index.js中有一个容器

root.render(
  <>
    <App />
    <ToastContainer />
  </>
)
javascript

1 个回答

  1. Best Answer

    这个例子有一段代码吗？

    这是一个带有上下文的示例...

    上下文本身可以在组件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>

    • 0

相关问题