reactjs - React 16.3 上下文:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:对象
问题描述
我对 React 比较陌生,所以这可能是一件非常简单的事情。
基本上,我一直在尝试使用 Context 操作模态。我已经设置了我的上下文(一个单独的文件):
import { createContext } from 'react';
export const ModalContext = createContext(false);
将它导入到我的组件中(使用 VS2017,所以我得到了 Intellisense):
import { ModalContext } from "../contexts/ModalContext";
尝试在 render 方法中实现它:
public render() {
let table = this.state.loading
? <p><em>Loading...</em></p>
: this._renderUrlsTable(this.state.urls);
return <ModalContext.Provider value={this.state.isAddMode}>
<div>
<h1>Urls</h1>
<ModalContext.Consumer>
{val =>
<button disabled={val}>Button</button>
}
</ModalContext.Consumer>
{table}
</div>
</ModalContext.Provider>;
}
但是,我收到了这种美丽:
不变违规:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。
现在,我知道有很多类似的帖子,但我找到的解决方案都没有。实际上,他们中的大多数都指向不正确的导入,这里不应该是这种情况。
我的反应依赖:
- “反应”:“^16.4.1”,
- “反应域”:“^16.4.1”,
- "react-hot-loader": "3.0.0-beta.7",
- “反应模式”:“3.1.13”,
- "react-router-dom": "4.1.1",
- "@types/react": "^16.3.18",
- "@types/react-dom": "^16.0.6",
- "@types/react-hot-loader": "3.0.3",
- "@types/react-modal": "3.1.1",
- "@types/react-router": "4.0.12",
- "@types/react-router-dom": "4.0.5",
- “打字稿”:“2.9.1”
总而言之,知道是什么原因造成的吗?
PS。对于那些不珍惜生命的人,我附上堆栈跟踪。
invariant
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118:15
ReactCompositeComponentWrapper.instantiateReactComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273:23
ReactCompositeComponentWrapper.performInitialMount
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799:22
ReactCompositeComponentWrapper.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactCompositeComponentWrapper.performInitialMount
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803:34
ReactCompositeComponentWrapper.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactDOMComponent.mountChildren
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:34169:44
ReactDOMComponent._createInitialChildren
localhost/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:31157:32
编辑:_renderUrlsTable 代码:
private _renderUrlsTable(urls: UrlViewItem[]) {
this._prepareTable(urls);
return(
<div className='col-sm-12'>
<table className='table'>
<thead>
<tr>
<th>Original URL</th>
<th>Code</th>
<th>Expiration date</th>
<th>Brand</th>
<th>Is generic NotFound page?</th>
<th>NotFound page</th>
<th>Visits</th>
<th>First visit</th>
<th></th>
</tr>
</thead>
<tbody>
{this.rows}
</tbody>
</table>
</div>
);
}
解决方案
export const ModalContext = createContext(false);
我认为参数createContext
应该是字符串或未定义。
另一件事是以下代码的作用:
{val =>
<button disabled={val}>Button</button
}
这是一个功能,我认为 JSX 不允许。
我不确定,但希望这可以解决您的问题。
推荐阅读
- javascript - 编辑方法没有检索到适当的信息 [错误] React
- r - 计算 R 中的已实现波动率
- java - 无法在 Windows 上使用 IntelliJ 创建 gradle 项目
- .net-core - ServicePoint 中的 CurrentConnections 返回零
- java - 如何在 onProgressChanges 之外获取 seekBar 的实时值?
- javascript - 从嵌套的 json 值对象中获取数组
- angular - Angular 8:将两个独立的应用程序合二为一
- python - 从低对比度图像中识别字符
- javascript - 当我在弹出窗口中输入“1 / 1”时,为什么我的 HTML 输入不显示“Cap”?
- jestjs - 为什么在 sequelize 上的超测请求之前完成了更早的运行?