React 16.3上下文：期望使用字符串（對於內置組件）或類/函數（對於復合組件），但得到：對象

Question

我對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. “ react”：“ ^ 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 / react-router”：“ 4.0.12”，
11. “ @ types / react-router-dom”：“ 4.0.5”，
12. “ 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>
    );
}

Answer 1

export const ModalContext = createContext(false);

我認為createContext參數應為字符串或未定義。

另一件事是下面的代碼做什么：

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

這是一個功能，我認為在JSX中是不允許的。

我不確定，但是希望這可以解決您的問題。

Answer 2

我無法確認，但我認為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”