如何在 class 组件中使用上下文 API

Question

我正在处理一个非常大的翻译项目。我使用 Formspree 来处理表格。我也想翻译一下

这是Formspree给出的代码：

import React, { useContext } from "react";
import { LanguageContext } from "../../../../App";
import './Form.css';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.submitForm = this.submitForm.bind(this);
        this.state = {
            status: ""
        };
    }
    
    render() {
        const { status } = this.state;
        return (
            <form
                onSubmit={this.submitForm}
                action="https://formspree.io/f/********"
                method="POST"
            >
                {/* <!-- add your custom form HTML here --> */}
                <div className="container">
                    <label style={{ color: 'black', fontSize: '18px' }}>Name <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <input type="text" name="Name" className='form-control mb-3' placeholder='Enter Your Name' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Email <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <input type="email" name="Email" className='form-control mb-3' placeholder='Enter Your Email' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Message <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <textarea type="text" name="Message" className='form-control mb-3' rows={3} placeholder='Tell Us Your Message' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Phone Number With Country Code <span style={{ color: '#6487FF' }}>(Optional)</span>:</label>
                    <input type="text" name="Phone" className='form-control mb-3' placeholder='Enter Your Phone Number' />
                    {status === "SUCCESS" ? <p className='mt-4' style={{ color: 'black' }}>Thanks For Your Message! Your Message Is Successfully Submitted!</p> : <button className='submit-contact-btn mt-3 mb-4'>Submit</button>}
                    {status === "ERROR" && <p style={{ color: 'black' }}>Oops! There was an error. Please Try Again</p>}
                </div>
            </form>
        );
    }

    submitForm(ev) {
        ev.preventDefault();
        const form = ev.target;
        const data = new FormData(form);
        const xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== XMLHttpRequest.DONE) return;
            if (xhr.status === 200) {
                form.reset();
                this.setState({ status: "SUCCESS" });
            } else {
                this.setState({ status: "ERROR" });
            }
        };
        xhr.send(data);
    }
}

这对我来说一团糟，因为我不使用 class 组件我使用功能组件。

我试图在该文件中添加我的上下文，但它每次都显示完全相同的错误。

这是错误：

我正在尝试将此代码放在那里：

const [isBangla, setIsBangla] = useContext(LanguageContext)

我多次尝试输入这行代码，但错误都是一样的。

Answer 1

要在 class 组件内使用上下文，您可以分配一个 contextType 来读取当前上下文。使用 contextType 可让您使用 this.context 使用该上下文类型的最接近当前值。您可以在任何生命周期方法中引用它，包括渲染函数。

所以，你可以这样写：

export default class MyForm extends React.Component {
  static contextType = LanguageContext // assign static contextType
    constructor(props) {
      //....
    }

现在，您可以在 MyForm 中使用 this.context 访问上下文值（在您的示例中，这将是一个数组作为 [isBangla, setIsBangla]）组件。

请注意，您不能在 class 组件中使用 useContext 挂钩，因为反应挂钩只能在功能组件中使用。

Answer 2

在您的 class 组件中，您可以定义上下文类型：

static contextType = LanguageContext;

然后您就可以通过this.context使用它了，例如

this.context.setIsBangla()

如何在 class 组件中使用上下文 API

How to use Context API in a class component

reactjs

react-context

react-class-based-component