reactjs - 具有动态主题值的 Google Recaptcha 组件 - Next.js
问题描述
我react-google-recaptcha
在 Next.js 上使用了一个简单的联系表单。可以使用一个按钮来切换应用程序主题,该按钮触发一个函数,该函数将“dark”作为一个类附加到 html 并在 localStorage 中添加一个变量。我如何让 recaptcha 更新这个?
问题是检查我需要访问的暗模式window
以检查 html 附加类或localStorage
检索我在主题开关上附加的暗模式值。这意味着我只能使用componentDidMount
只触发一次的生命周期方法。(SSR)
当上述任何一个值发生变化并重新安装组件时,我需要一些可以动态注入主题字符串的东西。这是我Captcha.jsx
要导入contact.jsx
页面的组件。
import React, { Component } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
export default class Captcha extends Component {
constructor(props) {
super(props);
this.state = {
theme: 'light',
};
}
componentDidMount() {
const darkmode = document.querySelector('html').classList.contains('dark');
if (darkmode) {
this.setState({ theme: 'dark' });
} else {
this.setState({ theme: 'light' });
}
}
render() {
return <ReCAPTCHA theme={this.state.theme} />;
}
}
ReCAPTCHA 主题在硬刷新时更改,但在单击功能切换时不会更改,这会:root
在找到附加到 html 的“暗”时使用选择器更改所有其他内容。
解决方案
推荐阅读
- node.js - 使用文本输入上传文件的最佳方式
- angular - 模板解析错误:不是已知元素
- sql - 在 Select 语句中使 Oracle 条件可选
- angular - 使用 GraphQL 和 React 比使用 GraphQL 和 Vue/Ember/Angular 有什么好处吗?
- javascript - 如何在本地地址和网址/备用地址之间切换锚链接?
- python - 类型错误:不可散列类型:'list'(使用字典)
- java - 从另一个类访问事件
- numpy - 计算大矩阵的前几个特征值
- regex - git word diff regex 奇怪的行为
- django - Vue警告:实例上未定义属性“搜索”