React 16.3中的上下文组件无效
React 16.3中的上下文组件无效
提问于 2018-04-05 01:20:37
我试图在React 16.3.1中使用新的上下文组件。我正在运行一个非常简单的例子：
const TestContext = React.createContext();
export default class Test extends Component {
render () {
return (
<TestContext.Provider value="abc">
<TestContext.Consumer>
{value => (
<div>{value}</div>
)}
</TestContext.Consumer>
</TestContext.Provider>
);
}
}但是，代码不会呈现，而是产生以下错误：
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
似乎提供者和消费者组件都不是有效的组件，不能通过React来呈现。
我是不是漏掉了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-05 16:15:50
弄明白了！
我更新了16.3.1，但没有更新ReactDOM。
运行npm uninstall -s react-dom && npm i -s react-dom将其更新为16.3.1并修复了该问题。
附带注意，我不会期望新的上下文API依赖于ReactDOM。
Stack Overflow用户
发布于 2018-04-05 02:20:03
对于当前的情况，您必须在TestContext.Consumer中返回一个react元素。
--提供者组件在树中使用得更高，接受一个名为value的支柱(可以是任何东西)。 消费者组件在树中的提供者下面的任何地方使用，并接受一个名为“子”的道具，它必须是一个接受值的函数，必须返回一个react元素(JSX)。
确保您呈现的是<Test />，而不是<TestContext />，并且您必须启动ReactiveandResponse16.3.1。
const TestContext = React.createContext();
class Test extends React.Component {
render() {
return (
<TestContext.Provider value="abc">
<TestContext.Consumer>{value => <div>{value}</div>}</TestContext.Consumer>
</TestContext.Provider>
);
}
}
render(<Test />, document.getElementById("root"));一个如何使用this.props.children实现此操作的示例
import React from "react";
import { render } from "react-dom";
const TestContext = React.createContext();
class TContext extends React.Component {
state = {
value: "abc"
};
render() {
return (
<TestContext.Provider
value={{
state: this.state
}}
>
{this.props.children}
</TestContext.Provider>
);
}
}
class Child extends React.Component {
render() {
return (
<TContext>
<TestContext.Consumer>
{context => <div>{context.state.value}</div>}
</TestContext.Consumer>
</TContext>
);
}
}
render(<Child />, document.getElementById("root"));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49662743
复制相关文章
相似问题
腾讯云开发者
