使用上下文将数据从父组件传递到子组件的 React 不起作用

Question

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

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")
);

当我运行它时，生成的子组件看起来是这样的。

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

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

Answer 1

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

你需要扭转这个局面。上下文使用者需要在外部，div需要在内部。

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