Reactjs 使用上下文将数据从父组件传递到子组件'；行不通

我对反应非常陌生，我做了一些实验来学习上下文对象。我的目标是将背景色从父组件传递到嵌套最深的子组件。下面是我的代码

import React, {Component} from "react";
import ReactDOM from "react-dom";
import "./index.css";


let {Provider, Consumer} = React.createContext();

class Parent extends Component {
    render() {
        return (
            <Provider value={this.state.color}><Level1Child></Level1Child></Provider>
        );
    }

    constructor(props) {
        super(props);
        this.state = {
            color: "bg-indigo-300"
        };
    }
}


class Level1Child extends Component {
    render() {
        return (
            <Level2Child></Level2Child>
        );
    }
}


class Level2Child extends Component {
    render() {
        return (
            <Level3Child></Level3Child>
        );
    }
}


class Level3Child extends Component {
    render() {
        return (
            <div className={<Consumer>{(stuff) => stuff}</Consumer>}>Data</div>
        );
    }
}


ReactDOM.render(
    <Parent />,

    document.getElementById("root")
);

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“/index.css”；
让{Provider，Consumer}=React.createContext（）；
类父级扩展组件{
render（）{
返回(
);
}
建造师（道具）{
超级（道具）；
此.state={
颜色：“bg-indigo-300”
};
}
}
类Level1Child扩展组件{
render（）{
返回(
);
}
}
类Level2Child扩展组件{
render（）{
返回(
);
}
}
类Level3Child扩展组件{
render（）{
返回(
stuff}>数据
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

当我运行它时，生成的子组件如下所示

<div id="root"><div class="[object Object]">Data</div></div>

数据

颜色类未通过。我怎样才能让它工作？谢谢。

类级别3儿童扩展组件{
class Level3Child extends Component {
    render() {
        return (
            <div className={<Consumer>{(stuff) => stuff}</Consumer>}>Data</div>
        );
    }
}

render（）{
返回(
stuff}>数据
);
}
}

你需要把这个翻过来。上下文使用者需要在外部，div需要在内部

class Level3Child extends Component {
  render() {
    return (
      <Consumer>
        {(stuff) => (
          <div className={stuff}>Data</div>
        )}
      </Consumer>
    )
  }
}

class Level3Child扩展组件{
render（）{
返回(
{（东西）=>(
资料
)}
)
}
}

谢谢你的回答，它很有效！我是否应该始终将使用者和提供者放在最高层？使用者需要围绕将使用该值的元素。这可能是渲染方法的最外层，但如果只有渲染方法的一部分需要该值，则它可以仅包装元素的一个子集。提供者需要比使用者（即祖先）在组件树中的位置更高，但具体位置并不重要。再次感谢您的澄清。