[英]Can I render piece of a stateful component in react?
是否有任何 api 允許我們編寫如下代碼:
const MyComponents = () => {
const [number, setNumber] = useState(0);
return {
Btn: <Button onPress={() => setNumber(number + 1)}>
{number}
</Button>,
Log: <p>{number}</p>
}
}
const Perent = () => <>
<div ...>
<MyComponents.Btn/>
...
...
</div>
<MyComponents.Log/>
</>
某種對某些組件進行分組的能力。並將它們呈現在不同的地方......
似乎通過使用上下文會更好地實現這一點。
例如
const { createContext, useState, useContext } = React; const CountContext = createContext(); const CountContainer = ({ children }) => { const [number, setNumber] = useState(0); return <CountContext.Provider value={{ number, setNumber }}> {children} </CountContext.Provider> }; const CountButton = () => { const { number, setNumber } = useContext(CountContext); return <button onClick={() => setNumber((c) => c + 1)}> {number} </button>; }; const CountLog = () => { const { number } = useContext(CountContext); return <p>{number}</p>; }; const SomeCountButtons = () => <div><CountButton /><CountButton /></div>; const App = () => (<div> <CountContainer> <CountButton /> <CountLog /> </CountContainer> <CountContainer> <SomeCountButtons /> <CountLog /> </CountContainer> </div>); ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="app"></div>
然后,任何出現在同一<CountContainer>
中的任何<CountButton>
或<CountLog>
> 都將能夠共享它們的 state。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.