× Error: Objects are not valid as a React child (found: object with keys {color}). If you meant to r

Error: Objects are not valid as a React child (found: object with keys {color}). 
If you meant to render a collection of children, use an array instead.

这是我在学习React-hook的useContext时报的一个错
先看一下中文翻译：
大概意思就是：对象不能作为React组件。

报错原因：
代码太长我就不沾了，直接分析原因。
我在A组件里使用export const colorContext = createContext()创建共享对象之后，
使用JSX暴露出去：

return (
        <colorContext.Provider value={{ color: 'blue' }}>  // 着重看这句
            {props.children}
        </colorContext.Provider>
    )

在B组件里使用了const color = useContext(colorContext)来引入使用color这个变量，
看一下我的JSX:

return (
        <div style={{color:color}}> 颜色{color}</div >
    )

问题就在这，colorContext是一个context 对象（React.createContext 的返回值),我把这个对象插值填入了HTML，所以报错了。
解决办法：
把color对象里的值取出来填入（就是暴露时的value）