Question

我会遇到一个问题,即在我康复申请中转调主题。申请支持两个主题,我称之为主题一和主题二。 I m 利用zy装,根据选定主题积极装上相应的主题组成部分。

每一个主题都界定了自己对共同的纽顿阶级的束缚。例如,在“主题一”中, but有红色,而在“主题二”中,则有色。

当我用一个子子把主题转换成时,问题就会出现。最初,在从主题一向主题二过渡时, but子的彩色从红土改写。然而,在转向“主题一”之后,纽伦肤色未能像预期的那样重回红。随后的主题交换也并未反映纽特的任何变化。

我的法典结构简化版:

// App.js
import React, { useState, Suspense } from  react ;
import ThemeContext from  ./ThemeContext ;
import  ./App.css ;

export const MawbThemeContext = createContext({ theme: "" })

const ThemeOne = React.lazy(() => import( ./ThemeOne ));
const ThemeTwo = React.lazy(() => import( ./ThemeTwo ));

const App = () => {
  const [theme, setTheme] = useState( one );

const handleChangeTheme = () => {
  startTransition(() => {
    if (theme ===  one ) {
      setTheme( two );
    } else {
      setTheme( one );
    }
  });
};


  return (
    <ThemeContext.Provider value={{ theme, handleChangeTheme }}>
      <Suspense fallback={<div>Loading...</div>}>
        {theme ===  one  ? <ThemeOne /> : <ThemeTwo />}
      </Suspense>
    </ThemeContext.Provider>
  );
};

export default App;

// ThemeOne.js
import React, { useContext } from  react ;
import ThemeContext from  ./ThemeContext ;
import  ./ThemeOne.css ;

const ThemeOne = () => {
  const { handleChangeTheme } = useContext(ThemeContext);

  return (
    <>
      <button className="common-btn-one" onClick={handleChangeTheme}>
        Theme One Button
      </button>
    </>
  );
};

export default ThemeOne;

// ThemeTwo.js
import React, { useContext } from  react ;
import ThemeContext from  ./ThemeContext ;
import  ./ThemeTwo.css ;

const ThemeTwo = () => {
  const { handleChangeTheme } = useContext(ThemeContext);

  return (
    <>
      <button className="common-btn-two" onClick={handleChangeTheme}>
        Theme Two Button
      </button>
    </>
  );
};

export default ThemeTwo;

Answer 1

这里的情况是:如果你想要改变一个共同的纽芬兰的主题,你是否真正需要两个不同的组成部分? 我对你的建议是,只建立一个纽芬兰部分,只改变这个纽州的主题:

//App.jsx
import { useState } from "react"
import Button from  ./components/Button 
import ThemeContext from "./context/ThemeContext"

function App() {
  const [theme, setTheme] = useState("light")
  const value = { theme, setTheme }

  return (
    <div className="App">
      <ThemeContext.Provider value={value}>
        <Button />
      </ThemeContext.Provider>
    </div>
  )
}

export default App

//ThemeContext.js
import React from "react"

const ThemeContext = React.createContext({
  theme: "light",
  setTheme: () => {},
})

export default ThemeContext

import { useContext } from "react"
import ThemeContext from "../context/ThemeContext.js"

const Button = () => {
  const { theme, setTheme } = useContext(ThemeContext)
  
  return (
    <button
      onClick={() => setTheme(theme == "dark" ? "light" : "dark")}
      style={{backgroundColor: theme === "dark" ? "red" : "white"}}
    >
      Change theme
    </button>
  )
}

export default Button;

希望能帮助你们! 亲爱!

友情链接