Question

问题：

我想要一个简单的布尔标志，当模式被打开时将为'$pbkdf2-sha256$30000$X6vVGgNgzFmrlVIq5RyjVA$VGQ5x.yuabpdNMDMNc1S3/umqXMl3605DyjJ/lgXAM0'，而当模式被关闭时将为true。而且我想根据该标志来反应更新其他组件

我希望有一种方法可以仅使用中继（Apollo has a solution for that）。我不想连接mobx或类似的东西（这只是简单的布尔标志！）。

我已经拥有的东西：

可以使用false来修改您的状态。确实，我能够像这样创建和修改我的新标志：

commitLocalUpdate

挑战：

如何以反应方式更新其他组件取决于该标记？ 我无法这样获取我的标志：

class ModalComponent extends PureComponent {
    componentDidMount() {
        // Here I either create or update value if it exists
        commitLocalUpdate(environment, (store) => {  
            if (!store.get('isModalOpened')) {
                store.create('isModalOpened', 'Boolean').setValue(true);
            } else {
                store.get('isModalOpened').setValue(true);
            }
        });
    }

    componentWillUnmount() {
        // Here I mark flag as false
        commitLocalUpdate(environment, (store) => {
            store.get('isModalOpened').setValue(false);
        });
    }

    render() {
        // This is just react component so you have full picture
        return ReactDOM.createPortal(
            <div
                className={ styles.modalContainer }
            >
                dummy modal
            </div>,
            document.getElementById('modal'),
        );
    }
}

因为中继编译器向我抛出错误：const MyComponent = (props) => { return ( <QueryRenderer environment={ environment } query={ graphql` query MyComponentQuery { isModalOpened }` } //PROBLEM IS HERE GraphQLParser: Unknown field `isModalOpened` on type `Query` render={ ({ error, props: data, retry }) => { return ( <div> {data.isModalOpened} <div/> ); } } />); };

最后一个问题： 如何避免服务器请求？ 该信息存储在客户端，因此无需请求。

我知道可能有一些类似的问题，例如that和that。但是他们没有问最新更新中最困难的部分，答案也已经过时。

Answer 1

如果您只需要存储一个标志，建议您使用React Context而不是Relay。您可以下一步：

向应用程序组件添加上下文：

const MyComponent = (props) => {
    const { isModalOpened } = useContext(ModalContext);

    return (
        <div>
            {isModalOpened}
        </div>
    );
};

随时随地从上下文中获取价值：

create-react-app

如果您将使用此解决方案，您将摆脱使用其他库（例如中继和服务器请求）的麻烦。

中继本地状态管理。如何在客户端添加和使用标志？

问题：

我已经拥有的东西：

挑战：

1 个答案: