如何在React不同文件中获取共享的持久化主题状态？

我来帮你解决这个跨组件共享isDark状态的问题，这里有几种可行的方案，从React官方推荐的优雅方案到快速临时方案都涵盖了：

方案一：使用React Context API（推荐） #

Context是React官方专门为跨组件/层级共享状态设计的方案，非常适合主题这种全局状态的场景。

步骤1：创建ThemeContext #

新建ThemeContext.jsx文件，把主题状态和持久化逻辑封装在这里：

import React, { createContext, useContext } from 'react';
import usePersistentState from './PersistentState';

// 创建Context
const ThemeContext = createContext();

// 提供状态的Provider组件
export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = usePersistentState('theme', true);

  // 同步主题到document类名（保留你原来的逻辑）
  React.useEffect(() => {
    isDark 
      ? document.documentElement.classList.add('other') 
      : document.documentElement.classList.remove('other');
  }, [isDark]);

  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 自定义Hook，简化其他组件获取主题状态的方式
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme必须在ThemeProvider内部使用');
  }
  return context;
}

步骤2：修改Toggle组件 #

现在Toggle不需要自己维护状态，直接通过useTheme获取：

import React from "react";
import { useTheme } from './ThemeContext';

const Theme = () => {
  const { isDark, setIsDark } = useTheme();

  return (
    <div>
      <main>
        <input 
          id="toggle" 
          name="toggle" 
          type="checkbox" 
          checked={isDark} 
          onChange={e => setIsDark(e.target.checked)} 
        />
        <label htmlFor="toggle" className="switch" id="switch"></label>
      </main>
    </div>
  )
}

class Toggle extends Component {
  render() {
    return <Theme />;
  }
}

export default Toggle;

步骤3：修改Particles组件 #

把Particles改成函数组件（或者用函数组件包裹参数逻辑），通过useTheme获取isDark：

import React from 'react';
import { Particles as ReactParticles } from 'react-particles-js';
import { useTheme } from './ThemeContext';

// 改成函数组件更方便使用Hook
const Particles = () => {
  const { isDark } = useTheme();
  
  const particleParams = {
    particles: {
      number: {
        value: 60,
      },
      color: {
        value: isDark ? "#ffffff" : "#000000" // 替换成你需要的颜色
      },
      // 其他粒子参数...
    }
  };

  return (
    <div className="particles">
      <ReactParticles width='100vw' height="100vh" params={particleParams} />
    </div>
  );
}

export default Particles;

步骤4：用ThemeProvider包裹根组件 #

在你的根组件（比如App.jsx）里，用ThemeProvider包裹所有需要访问主题状态的组件：

import { ThemeProvider } from './ThemeContext';
import Toggle from './Toggle';
import Particles from './Particles';

function App() {
  return (
    <ThemeProvider>
      <Toggle />
      <Particles />
      {/* 其他需要主题的组件 */}
    </ThemeProvider>
  );
}

方案二：提升状态到共同父组件 #

如果Toggle和Particles有共同的父组件，可以把状态提升到父组件，通过props传递给两个组件，这是React中状态共享的基础方案。

步骤1：在父组件维护状态 #

比如在App.jsx中：

import React from 'react';
import usePersistentState from './hooks/PersistentState';
import Toggle from './Toggle';
import Particles from './Particles';

function App() {
  const [isDark, setIsDark] = usePersistentState('theme', true);

  // 同步主题到document类名
  React.useEffect(() => {
    isDark 
      ? document.documentElement.classList.add('other') 
      : document.documentElement.classList.remove('other');
  }, [isDark]);

  return (
    <div>
      <Toggle isDark={isDark} setIsDark={setIsDark} />
      <Particles isDark={isDark} />
    </div>
  );
}

步骤2：修改Toggle接收props #

import React from "react";

const Theme = ({ isDark, setIsDark }) => {
  return (
    <div>
      <main>
        <input 
          id="toggle" 
          name="toggle" 
          type="checkbox" 
          checked={isDark} 
          onChange={e => setIsDark(e.target.checked)} 
        />
        <label htmlFor="toggle" className="switch" id="switch"></label>
      </main>
    </div>
  )
}

class Toggle extends Component {
  render() {
    return <Theme isDark={this.props.isDark} setIsDark={this.props.setIsDark} />;
  }
}

export default Toggle;

步骤3：修改Particles接收props #

import React, { Component } from 'react';
import { Particles as ReactParticles } from 'react-particles-js';

class Particles extends Component {
  render() {
    const { isDark } = this.props;
    const params = {
      particles: {
        number: {
          value: 60,
        },
        color: {
          value: isDark ? "#ffffff" : "#000000"
        },
        // 其他粒子参数...
      }
    };
    return (
      <div className="particles">
        <ReactParticles width='100vw' height="100vh" params={params} />
      </div>
    )
  }
}

export default Particles;

方案三：直接读取localStorage（快速临时方案） #

因为你的usePersistentState已经把状态存在localStorage的theme键里了，所以可以直接在Particles中读取，适合快速测试，但不是长期优雅方案。

import React, { Component, useEffect, useState } from 'react';
import { Particles as ReactParticles } from 'react-particles-js';

class Particles extends Component {
  state = {
    isDark: JSON.parse(localStorage.getItem('theme')) || true
  };

  // 监听localStorage变化，确保状态同步
  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === 'theme') {
        this.setState({ isDark: JSON.parse(e.newValue) });
      }
    };
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  render() {
    const { isDark } = this.state;
    const params = {
      particles: {
        number: {
          value: 60,
        },
        color: {
          value: isDark ? "#ffffff" : "#000000"
        },
        // 其他粒子参数...
      }
    };
    return (
      <div className="particles">
        <ReactParticles width='100vw' height="100vh" params={params} />
      </div>
    )
  }
}

export default Particles;

这个方案的缺点是：如果后续修改状态存储方式，代码需要同步修改；而且React组件不会自动监听localStorage变化，需要手动添加事件监听。

内容的提问来源于stack exchange，提问作者arctic