从函数中导出变量

Question

如何从主题组件导出isDark？或者可以在不导出的情况下从另一个文件中查询isDark？

Toggle.js

import React, { Component, useEffect } from "react";
import { Particles as ReactParticles } from 'react-particles-js';
import usePersistentState from '../hooks/PersistentState';

const Theme = () => {
    const [isDark, setIsDark] = usePersistentState('theme', true); // default to dark mode

    useEffect(() => {
        if (isDark) {
            document.documentElement.classList.add('other');
        } else {
            document.documentElement.classList.remove('other');
        }
    });

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

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

export default Toggle;

我正在尝试使用isDark、Background.js

import React, { Component } from 'react';
import { isDark } from './Toggle' <- doesnt work obviously
console.log(isDark)

const PARAMS = {
    "text": {
        "color": {
            "value": `${isDark ? '#000000' : '#FFFFFF'}`
        },
        ...

其中使用了PARAMS：

class Background extends Component {
    render() {
        return (
            <div className="particles">
                <ReactParticles width='100vw' height="100vh" params={PARAMS} />
            </div>
        )
    }
}

Answer 1

使用钩子。将其命名为类似于useTheme的名称，并让它返回读取的主题值。您还可以考虑使用上下文，以便可以在上下文提供程序中缓存主题值。

Here就是一个例子。您可以看到，我创建了一个上下文值，该值可以保持单个主题实例，稍后可以通过useTheme注入该实例。您可以向上下文对象添加任何您想要的内容，并允许钩子有选择地将这些值导出到消费者。这很好，因为钩子可以接受一堆冗长的值和设置器，并为消费者提供更符合人体工程学的api。这就是react-redux和react-router的工作方式。