将功能组件转换为 class 组件（ReactJS）时出现问题

Question

这是我的功能组件。 工作正常

---

    import React from "react";

    function RecommendationCard(props) {
      const { name, designation, company, message } = props.recommendation;
      return (
        <div className="col-12 col-md-4">
          <div className="card shadow h-100">
            <div className="card-body">
              <h4 className="card-text">{message}</h4>
              <p className="card-text text-secondary mb-0">{name}</p>
              <p className="card-text text-secondary">
                {designation} at {company}
              </p>
            </div>
          </div>
        </div>
      );
    }

    export default RecommendationCard;

下面的代码转换为 state 组件。这里不使用道具，我使用了来自我的 context.js 文件的数据，例如 state。 它包含名称，公司，名称，推荐等所有数据。 所以我通过消费者使用它。 但这不显示属性。

---

  import React, { Component } from 'react';
  import { Consumer } from '../context';

  class RecommendationCardextends Component {
    state = {
      name:"",
      message:"",
      designation:"",
      company:"",
    }

      render() {
        return(
          <Consumer>
          {(value) =>{
              const { name, designation, company,message } = this.state;
              
              return (
                <div className="col-12 col-md-4">
                <div className="card shadow h-100">
                  <div className="card-body">
                    <h4 className="card-text">{message}</h4>
                    <p className="card-text text-secondary mb-0">{name}</p>
                    <p className="card-text text-secondary">
                      {designation} at {company}
                    </p>
                  </div>
                </div>
              </div>
              );
          }}
        </Consumer>
        );
    }
  }
    
  
  export default RecommendationCard;

我请求您解决这个问题并帮助我解决这个问题。 提前谢谢你。

Answer 1

我在代码沙盒上做了一个工作示例： https://codesandbox.io/s/exciting-chatelet-7il42?file=/src/App.js

应用程序：

import React from "react";
import "./styles.css";
import RecommendationCard from "./components/RecommendationCard";
import {MyContext} from "./context"

const initialState = {
  message: "default message",
  company: "default company",
  designation: "default designation",
  name: "default name"
};

export { MyContext };

export default function App() {
  return (
    <div className="App">
      <MyContext.Provider value={initialState}>
        <RecommendationCard />
      </MyContext.Provider>
    </div>
  );
}

推荐卡：

import React, { Component } from "react";
import { MyContext } from "../context";

class RecommendationCard extends Component {
  
  static contextType = MyContext;

  render() {
    return (
      <div className="col-12 col-md-4">
        <div className="card shadow h-100">
          <div className="card-body">
            <h4 className="card-text">{this.context.message}</h4>
            <p className="card-text text-secondary mb-0">{this.context.name}</p>
            <p className="card-text text-secondary">
              {this.context.designation} at {this.context.company}
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default RecommendationCard;

语境：

import React from "react";

export const MyContext = React.createContext();

Answer 2

      <Consumer>
        {({ name, designation, company, message }) => (
          <div className="col-12 col-md-4">
            <div className="card shadow h-100">
              <div className="card-body">
                <h4 className="card-text">{message}</h4>
                <p className="card-text text-secondary mb-0">{name}</p>
                <p className="card-text text-secondary">
                  {designation} at {company}
                </p>
              </div>
            </div>
          </div>
        )}
      </Consumer>

假设您以后不打算对它做任何事情，那么在您提供的示例中，您本地的 state 将过时。 您所有的数据都在value中。 我个人觉得使用 Hook API useContext时这会变得容易得多。