我对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>;
}
但是,我得到了这种美丽:
不变违反:元素类型无效:预期为字符串(对于 内置组件)或类/函数(用于复合组件) 但得到:对象。
现在,我知道有很多类似的帖子,但是我找到的解决方案都没有。实际上,它们大多数都指向错误的导入,这里不应该这样。
我的React依赖项:
总而言之,您知道是什么原因造成的吗?
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
编辑:_renderUrls表代码:
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>
);
}
答案 0 :(得分:0)
export const ModalContext = createContext(false);
我认为createContext
的参数应该是字符串或未定义。
另一件事是下面的代码做什么:
{val =>
<button disabled={val}>Button</button
}
这是一个功能,我认为在JSX中是不允许的。
我不确定,但是希望这可以解决您的问题。
答案 1 :(得分:0)
我无法确认,但是我认为16.3.0中存在错误。我遇到了同样的错误;但是,我又恢复到15.6.x,一切恢复正常。
这是我当前(还原)的反应依赖项列表: