繁体   English   中英

我可以在反应中渲染有状态组件的一部分吗?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM