我可以在 React 中渲染一段有状态组件吗？

Question

是否有任何API可以让我们编写这样的代码：

const MyComponents = () => {
    const [number, setNumber] = useState(0);

    return {
        Btn: <Button onPress={() => setNumber(number + 1)}>
            {number}
        </Button>,
        Log: <p>{number}</p>
    }
}

const Parent = () => <>
    <div ...>
       <MyComponents.Btn/>
        ...
        ...
    </div>
    <MyComponents.Log/>
</>

某种对某些组件进行分组的能力。并将它们渲染在不同的地方......

Answer 1

似乎使用上下文可以更好地实现这一点。

例如

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>

然后，同一

<CountButton>

中任何位置出现的任何

<CountLog>

或

<CountContainer>

都将能够共享其状态。