Javascript React导出上下文返回解析错误：导出'；SearchContextConsumer'；没有定义

我试图创建一个上下文，以便在不使用道具钻取的情况下将数据传递到另一个组件，但当我导出我的消费者时，我发现解析错误：未定义导出“SearchContextConsumer” 问题是什么？如何成功导出

这是我的密码：

import React, { Component } from "react";
import axios from "axios";

class Search extends Component {
    state = {
        searchResults: [],
        isSearched: false
    }

    SearchContext = React.createContext('context');
    SearchContextConsumer = SearchContext.Consumer;
    data = { searchResults: this.state.searchResults }

    Search = ({ children }) => (
        <SearchContext.Provider value={searchResults}>{children}</SearchContext.Provider>
    )

    getSearchQuery = (event) => {
        const queryString = document.querySelector(
            ".search-input"
        ).value;

        if (event.keyCode === 13) {
            axios.post("http://localhost:3001/search", {
                queryString: queryString,


            }).then(response => {

                this.setState({ ...this.state, searchResults: response.data });

            });
            this.setState({ ...this.state, isSearched: true });
            window.location.href = '/blog/searchResults'
        }
    };

    render() {
        return (
            <div>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </div>
        );
    }
}

export { SearchContextConsumer }
export default Search;

import React，{Component}来自“React”；
从“axios”导入axios；
类搜索扩展组件{
状态={
搜索结果：[]，
Issearch：错
}
SearchContext=React.createContext（'context'）；
SearchContextConsumer=SearchContext.Consumer；
数据={searchResults:this.state.searchResults}
搜索=（{children}）=>(
{儿童}
)
getSearchQuery=（事件）=>{
const queryString=document.querySelector(
“.search输入”
).价值；
如果（event.keyCode===13）{
axios.post（“http://localhost:3001/search", {
查询字符串：查询字符串，
})。然后（响应=>{
this.setState（{…this.state，searchResults:response.data}）；
});
this.setState（{…this.state，isSearched:true}）；
window.location.href='/blog/searchResults'
}
};
render（）{
返回(
this.getSearchQuery（e）}
/>
);
}
}
导出{SearchContextConsumer}
导出默认搜索；

这对我来说似乎不必要的复杂。为什么不直接导出创建的上下文并包装子对象 直接在提供程序中：

import React, { Component } from "react";
import axios from "axios";

export const SearchContext=React.createContext（）

类搜索扩展组件{
状态={
搜索结果：[]，
Issearch：错
}
数据={searchResults:this.state.searchResults}
getSearchQuery=（事件）=>{
const queryString=document.querySelector(
“.search输入”
).价值；
如果（event.keyCode===13）{
axios.post（“http://localhost:3001/search", {
查询字符串：查询字符串，
})。然后（响应=>{
this.setState（{…this.state，searchResults:response.data}）；
});
this.setState（{…this.state，isSearched:true}）；
window.location.href='/blog/searchResults'
}
};
render（）{
返回(
this.getSearchQuery（e）}
/>
);
}
}
导出默认搜索；

要使用上下文的组件必须包装在使用者内部：

import {SearchContext} from "Search"

<SearchContext.Consumer>
  {value => /* render something based on the context value */}
</SearchContext.Consumer>

从“搜索”导入{SearchContext}
{value=>/*根据上下文值*/}呈现某些内容

不能以这种方式导出类的属性

我认为最简单、最干净的方法就是在课堂之外创建

上下文，如下所示：

import React, { Component } from "react";
import axios from "axios";

const SearchContext = React.createContext();

class Search extends Component {
    state = {
        searchResults: [],
        isSearched: false
    }



    data = { searchResults: this.state.searchResults }

    getSearchQuery = (event) => {
        const queryString = document.querySelector(
            ".search-input"
        ).value;

        if (event.keyCode === 13) {
            axios.post("http://localhost:3001/search", {
                queryString: queryString,


            }).then(response => {

                this.setState({ ...this.state, searchResults: response.data });

            });
            this.setState({ ...this.state, isSearched: true });
            window.location.href = '/blog/searchResults'
        }
    };

    render() {
        return (
            <SearchContext.Provider value={searchResults}>
                <input
                    type="text"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}
                />
            </SearchContext.Provider>
        );
    }
}

export SearchContext.Consumer as SearchContextConsumer
export default Search;

现在，如果需要使用上下文数据，只需在
提供程序区域内执行此操作即可：

const searchResults = React.useContext(SearchContext);

我试着按你的方式做，但我得到的错误是解析错误：导出“SearchContext”未定义我犯了一个错误。存储的声明必须如下所示：
const SearchContext=React.createContext（）。我忘了把它声明为常量。请用这个再试一次。是的，我的错<代码>搜索上下文
已在类组件中定义。由于作用域的原因，类外的export语句不知道什么是
SearchContext
。我将类外的声明移动到组件的顶部。因此，您可以直接导出它，并且类组件可以访问它。
import React, { Component } from "react";
import axios from "axios";

const SearchContext = React.createContext();

const Search = () => {
  const [state, setState] = useState({
    searchResults: [],
    isSearched: false
  });

  const getSearchQuery = event => {
    const queryString = document.querySelector(".search-input").value;

    if (event.keyCode === 13) {
      axios
        .post("http://localhost:3001/search", {
          queryString: queryString
        })
        .then(response => {
          setState({ ...state, searchResults: response.data });
        });
      setState({ ...state, isSearched: true });
      window.location.href = "/blog/searchResults";
    }
  };

  return (
    <SearchContext.Provider value={state.searchResults}>
      <input
        type="text"
        className="search-input"
        onKeyDown={e => getSearchQuery(e)}
      />
    </SearchContext.Provider>
  );
};

export default Search;

const searchResults = React.useContext(SearchContext);