0

我想用 create react app 来构建我的项目。但是，当我在项目目录中运行“yarn start”时，我遇到了一个空白页。正如其他人所说，我设置了“主页”：“。” . 但这不起作用。

有人说路由器应该设置为“hashrouter”。不幸的是，我不明白该怎么做。

这是我使用上下文构建“themeSwitcher”的代码。

index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import './app.css';
import {themeContext} from './context.js';

function themeSwitcher(){
    return (
        <themeContext.consumer>
            {({Theme,changeTheme}) => (
                <input
                    type="checkbox"
                    checked={Theme === "dark"}
                    onChange={() => changeTheme(Theme === "dark" ? "light" : "dark")}
                />
            )}
        </themeContext.consumer>
    );
}

class app extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        Theme: "light",
        changeTheme: this.changeTheme
    };
}
changeTheme = (Theme) => {
    this.setState({
        Theme
    });
};

render() {
    return (
         <themeContext.provider value={this.state}>
              <div>
                  <p>this is a switcher theme</p>
                  <span>Dark mode</span>
                  <themeSwitcher />
              </div>
         </themeContext.provider>
    );
}
}



ReactDOM.render(<app />, document.getElementById("root"));

上下文.js：

import React from "react";

export const themeContext = React.createContext({
    Theme: "light",
    changeTheme: () => {}
});
4

1 回答 1

0

为什么组件用小写字母书写？组件名称必须以大写字母开头。

如果可能，然后显示来自 './context.js' 的代码

import React from 'react'
import ReactDOM from 'react-dom'
import './app.css'
import { ThemeContext } from './context.js'

function ThemeSwitcher() {
  return (
    <ThemeContext.Consumer>
      {({ theme, toggleTheme }) => (
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={toggleTheme}
        />
      )}
    </ThemeContext.Consumer>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      theme: 'light'
    }
  }

  toggleTheme = () => {
    this.setState(state => ({
      theme:
        state.theme === 'dark'
          ? 'light'
          : 'dark',
    }));
  }

  contextValue = {
    theme: this.state.theme,
    toggleTheme: this.toggleTheme
  }

  render() {
    return (
      <ThemeContext.Provider value={this.contextValue}>
        <div>
          <p>this is a switcher theme</p>
          <span>Dark mode</span>
          <ThemeSwitcher />
        </div>
      </ThemeContext.Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

您还可以使用钩子和功能组件。代码更干净。

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import './app.css'
import { ThemeContext } from './context.js'

const ThemeSwitcher = () => (
  <ThemeContext.Consumer>
    {({ theme, toggleTheme }) => (
      <input
        type="checkbox"
        checked={theme === 'dark'}
        onChange={toggleTheme}
      />
    )}
  </ThemeContext.Consumer>
)

const App = () => {
  const [theme, setTheme] = useState('light')

  const toggleTheme = () => setTheme(theme === 'dark' ? 'light' : 'dark')

  const contextValue = {
    toggleTheme,
    theme,
  }

  return (
    <ThemeContext.Provider value={contextValue}>
      <div>
        <p>this is a switcher theme</p>
        <span>Dark mode</span>
        <ThemeSwitcher />
      </div>
    </ThemeContext.Provider>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

context.js 代码

import React, { createContext } from "react";

export const ThemeContext = createContext({
    theme: "light",
    toggleTheme: () => {}
});
于 2021-11-20T11:20:56.513 回答