首页 文章

React 16.3 Context：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object

提问于
浏览 次
1

我对React很新，所以这可能是一件非常简单的事情 .

基本上，我一直在尝试使用Context操作模态 . 我已经设置了我的Context（一个单独的文件）：

import { createContext } from 'react';

export const ModalContext = createContext(false);

将它导入我的Component（使用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>;
    }

但是，我收到这样的美：

不变违规：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object .

现在，我知道有很多类似的帖子，但我找不到任何解决方案 . 实际上，大多数都指向不正确的导入，这不应该是这种情况 .

我的React依赖项：

  • "react"："^16.4.1"，

  • "react-dom"："^16.4.1"，

  • "react-hot-loader"："3.0.0-beta.7"，

  • "react-modal"："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"，

  • "typescript"："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>
    );
}
reactjs typescript react-context

2 回答

  • 0
    export const ModalContext = createContext(false);

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

    另一件事是以下代码的作用：

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

    这是一个函数，我认为在JSX中是不允许的 .

    我不确定，但希望这可以解决您的问题 .

    回复于
  • 0

    我无法确认，但我认为16.3.0中存在错误 . 我得到了同样的错误;然而，我又回到了15.6.x，一切都很好 .

    这是我当前（恢复的）反应依赖列表：

    • "react"："15.6.1"

    • "react-dom"："15.6.1"

    • "react-hot-loader"："3.0.0-beta.7"

    • "react-leaflet"："^1.8.0"

    • "react-router-dom"："4.1.1"

    回复于

相关问题