标签: react-context

我正在尝试向我的应用程序添加简单的 React Context。我在“./components/DataProvider.js”中创建了如下所示的上下文：

import React, { Component } from 'react'

const DataContext = React.createContext()

class DataProvider extends Component {
    state = {
        isAddButtonClicked: false
    }

    changeAddButtonState = () => {
        if( this.state.isAddButtonClicked ) {
            this.setState({
                isAddButtonClicked: false
            })
        } else {
            this.setState({
                isAddButtonClicked: true
            })            
        }
    }

    render() {
        return(
            <DataContext.Provider
                value={{
                    isAddButtonClicked: this.state.isAddButtonClicked,
                    changeAddButtonState: () => {
                        if( this.state.isAddButtonClicked ) {
                            this.setState({
                                isAddButtonClicked: false
                            })
                        } else {
                            this.setState({
                                isAddButtonClicked: true
                            })            
                        }
                    }
                }}
            >
                {this.props.children}
            </DataContext.Provider>
        ) …

我已经实现了 React Context API，并且我正在尝试通过子组件内的 onClick 函数更新 Provider 内定义的状态。

这是我到目前为止所做的，在App.js 中我有：

import { createContext } from 'react';
const MyContext = React.createContext();
export class MyProvider extends Component {
    state = {
        currPrj: ''
    }

    handleBtnClick = prjCode => {

        this.setState({
            currPrj: prjCode
        })

    }

    render() {
        return(
            <MyContext.Provider value={{
                state: this.state
            }}>
                {this.props.children}
            </MyContext.Provider>
        )
    }
}

export const MyComsumer = MyContext.Consumer;

在我的子组件中，我有：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } …

每次onClick执行时，我都会收到一条关于内存泄漏的警告消息。如何使用钩子从我的功能组件中的Context.Consumer取消订阅组件useEffect？

我没有找到如何取消订阅 AppContext 的方法。AppContext.unsubsribe()不工作。

import React, {useState, useContext} from 'react';
import {withRouter} from 'react-router-dom';
import axios from 'axios';
import {AppContext} from "../context/AppContext";

const LoginPage = (props) => {

    const [name, setName] = useContext(AppContext);
    const [isLoading, setIsLoading] = useState(false);

    const onClick = () => {
        setIsLoading(true);
        axios.post('/get-name')
            .then(resp => {
                setName(resp);
                setIsLoading(false);
                props.history.push('/');
            })
            .catch(err => console.log(err))
            .finally(() => setIsLoading(false));
    };

    return (
        <div>
            <button onClick={onClick}></button>
        </div>
    );
};

export default withRouter(LoginPage);

浏览器控制台中的错误消息： …

给定一个应用程序环境，其中 typescript 不是一个选项，并且使用 React Hooks。

当使用带有...的上下文时

const myContext = useContext(MyContext)

...如何以一种我们从 propTypes 概念中知道的方式声明上下文签名？

React 会使用这样的声明来警告吗？

如果有一天上下文签名发生变化，我会尝试确保为我的组件显示警告。

我有一个或多或少结构如下的表单页面：

<Layout>
  <Page>
    <Content>
      <Input />
      <Map />
    </Content>
  </Page>
  <Button />
</Layout>

Map 组件应该只渲染一次，因为在渲染时会触发一个动画。这意味着内容、页面和布局根本不应该重新渲染。

当输入为空时，应禁用布局内的按钮。Input 的值不受 Content 控制，因为状态更改会导致重新渲染 Map。

我尝试了一些不同的东西（使用 refs、useImperativeHandle 等），但没有一个解决方案让我感觉很干净。在不更改布局、页面或内容状态的情况下，将输入状态连接到按钮状态的最佳方法是什么？请记住，这是一个相当小的项目，代码库使用“现代”React 实践（例如钩子），并且没有像 Redux、MobX 等那样的全局状态管理。

我们如何在 React.CreateContext 中使用泛型？

我有这个：

interface Props {
}

export interface SearchContextProps {
  dtos: any[];
}

export const SearchContext = React.createContext<SearchContextProps>({
  dtos: []
});

const SearchPage: React.FunctionComponent<Props> = (props) => {
  const [dtos, setDtos] = React.useState<any[]>([]);

  const searchContext = {
    dtos: dtos
  };

  return (
    <SearchContext.Provider value={searchContext}>
      ...
    </SearchContext.Provider>
  );
}

export default SearchPage;

现在我想使用泛型，所以我会写这样的内容：

interface Props<T> {
}

export interface SearchContextProps<T> {
  dtos: T[];
}

export const SearchContext = React.createContext<SearchContextProps<T>>({
  dtos: []
});

const SearchPage = <T extends object>(props: Props<T>) …

我有一个反应网络应用程序，在导航上有一个主题切换。我有一个ThemeProvider Context具有自动检测用户的系统主题首选项并设置它的逻辑。然而，我认为用户应该能够在网站上来回切换主题，无论他们的系统偏好如何。这是ThemeContext.js包含所有主题逻辑（包括方法）的文件toggle。

import React, { useState, useLayoutEffect } from 'react';

const ThemeContext = React.createContext({
    dark: false,
    toggle: () => {},
});

export default ThemeContext;

export function ThemeProvider({ children }) {
    // keeps state of the current theme
    const [dark, setDark] = useState(false);

    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
        .matches;
    const prefersLight = window.matchMedia('(prefers-color-scheme: light)')
        .matches;
    const prefersNotSet = window.matchMedia(
        '(prefers-color-scheme: no-preference)'
    ).matches;

    // paints the app before it renders elements
    useLayoutEffect(() => {
        // Media …

我想拨打电话来获取用户信息并在整个应用程序的不同组件中使用它，所以我使用了react.Context，并且我设法在组件之间移动字符串，但是当我尝试使用 axios.get 时，我是无法将数据获取到另一个组件，这里是上下文代码：

import React, { createContext } from 'react';
import axios from 'axios';

export const userContext = createContext();

export const UserProvider = (props) => {
    const config = {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `JWT ${localStorage.getItem('access')}`,
            'Accept': 'application/json'
        }
    };
    const res = axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config)
    return(
    <userContext.Provider value= { res }>{props.children}</userContext.Provider>
    );
} 

有人可以告诉我我在这里做错了什么吗

我想在 Nodejs 中复制 React Context 的行为，但我正在努力解决它。

在反应，通过创建只有一个背景下，我可以提供，在我的组件占用不同的值，取决于value给予<Provider/>。所以以下工作：

const MyContext = React.createContext(0);

const MyConsumer = () => { 
  return (
    <MyContext.Consumer>
      {value => {
        return <div>{value}</div>
      }}
    </MyContext.Consumer>
  )
}

const App = () => 
    <React.Fragment>
      <MyContext.Provider value={1}>
        <MyConsumer/>
      </MyContext.Provider>
      <MyContext.Provider value={2}>
        <MyConsumer/>
      </MyContext.Provider>
    </React.Fragment>;

ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

但是我不知道如何在 Nodejs 中实现它。我已经查看了 React Context 的源代码，但它没有多大帮助......这是我到目前为止所得到的：

// context.js
export const createContext = (defaultValue: number) => {
  const context = {
    value: defaultValue, …

在该项目中，我正在创建一个 React Contex，并且我想正确键入子项，不幸的是在 codeandbox 中仅接受“任何”类型。您能看一下并建议它应该是什么类型吗？我想避免“任何”类型。

这就是 Context.Provider 的实现方式

const App = () => {
  return (
    <BrowserRouter>
      <PostsContextProvider>
        <HeaderComponent />
        <ButtonsNavigation />
        <Routing />
      </PostsContextProvider>
      <DownBar />
    </BrowserRouter>
  );
};

export default App;

这是 Context 组件

interface PostsContextValues {
  posts: PostType[];
}

export const PostsContext = createContext<PostsContextValues>({
  posts: []
});

export const PostsContextProvider = ({ children }: any) => {
  const value = useMemo(
    () => ({
      posts: data
    }),
    [data]
  );

  return (
    <PostsContext.Provider value={value}>{children}</PostsContext.Provider>
  );
};

谢谢 ！