React 16.3上下文:期望使用字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象

时间:2018-06-20 16:00:46

标签: reactjs typescript react-context

我对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依赖项:

  1. “反应”:“ ^ 16.4.1”,
  2. “ react-dom”:“ ^ 16.4.1”,
  3. “ react-hot-loader”:“ 3.0.0-beta.7”,
  4. “反应模式”:“ 3.1.13”,
  5. “ react-router-dom”:“ 4.1.1”,
  6. “ @ types / react”:“ ^ 16.3.18”,
  7. “ @ types / react-dom”:“ ^ 16.0.6”,
  8. “ @ types / react-hot-loader”:“ 3.0.3”,
  9. “ @ types / react-modal”:“ 3.1.1”,
  10. “ @ types /反应路由器”:“ 4.0.12”,
  11. “ @ types / react-router-dom”:“ 4.0.5”,
  12. “打字稿”:“ 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

编辑:_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>
    );
}

2 个答案:

答案 0 :(得分:0)

export const ModalContext = createContext(false);

我认为createContext的参数应该是字符串或未定义。

另一件事是下面的代码做什么:

{val =>
      <button disabled={val}>Button</button
}

这是一个功能,我认为在JSX中是不允许的。

我不确定,但是希望这可以解决您的问题。

答案 1 :(得分:0)

我无法确认,但是我认为16.3.0中存在错误。我遇到了同样的错误;但是,我又恢复到15.6.x,一切恢复正常。

这是我当前(还原)的反应依赖项列表:

  • “反应”:“ 15.6.1”
  • “ react-dom”:“ 15.6.1”
  • “ react-hot-loader”:“ 3.0.0-beta.7”
  • “反应叶”:“ ^ 1.8.0”
  • “ react-router-dom”:“ 4.1.1”