正在初始化上下文.提供程序多次使用不同的值

Question

在代码审查时，我看到一些这样的代码对我来说没有意义，但我无法识别问题

import React, { useContext, useState } from 'react'
const ThemeContext = React.createContext('');
function CtxProvider({ name }) {
const [ctx, setCtx] = useState('aaa')
const [s, setS] = useState(0)
return <ThemeContext.Provider value={ctx}>
<div>Hello,{name}
<Content></Content>
<div>{s}</div>
<button onClick={() => { setCtx('bbb') }}>change</button>
<button onClick={() => { setS(Math.random()) }}>flush</button>
</div>
</ThemeContext.Provider>
}
function Content() {
const value = useContext(ThemeContext)
return <div>context: {value}</div>
}
export default function App() {
return <div>
<CtxProvider name='hello'></CtxProvider>
<CtxProvider name='world'></CtxProvider>
</div>
}

这里我们只有一个ThemeContext，但是ThemeContext.Provider与不同的value道具一起使用。我担心的是，如果Provider的值以某种方式相关。注意，useContext的参数是ThemeContext，如何可能使用给哪个提供者值

Answer 1

接受上下文对象(从React.createContext(，并返回其当前上下文值上下文当前上下文值由最近的<MyContext.Provider>在中的调用组件之上树。

OK，最近的