将功能组件转换为类组件（ReactJS）的问题

Posted 2023-02-23

【中文标题】将功能组件转换为类组件（ReactJS）的问题

【英文标题】：Problem in converting functional component to class component (ReactJS)

【发布时间】：2020-10-17 17:20:48

【问题描述】：

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

---

    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;

下面的代码是转换后的状态组件。这里没有使用 props ，我使用了我的 context.js 文件中的数据，比如状态。它包含名称，公司，名称，推荐等所有数据。所以我通过消费者使用它。但这并没有显示属性。

---

  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;

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

【问题讨论】：

就像你说的，Context 保存了你所有的数据，但是你从this.state 解构它，这是你组件的本地状态。

【参考方案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();

【讨论】：

感谢您的关注！尝试导入错误：“上下文”未从“../context”导出。

我在代码沙箱上做了一个有效的答案：codesandbox.io/s/exciting-chatelet-7il42?file=/src/components/…

谢谢！你可以看看这个。 codesandbox.io/s/lucid-buck-1dvev?file=/src/index.js

乍一看还可以，但是如果没有其余的导入文件，我就无法运行它。官方 React 文档还建议导出 Context 本身而不是 Context.Consumer。由于您使用的是功能组件，因此您可以导入 Context 并使用 useContext 挂钩解构它： const handler, blogs = useEffect(Context)。如果你这样做，就不需要 Consumer 或 value => 语法。

【参考方案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>

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

【讨论】：

感谢您的关注！但在输出中，这些值未显示（名称、公司、名称、消息。）。而是打印在输出中

是RecommendationCard 包裹在Provider 中吗？它应该看起来像这样<MyContext.Provider value=/* some value */>。 value 道具保存您的数据，而您的 Consumer 使您可以通过所谓的渲染道具模式访问该对象。你能提供一个codeandbox给我们看吗？

抱歉耽搁了！这是我的密码箱codesandbox.io/s/lucid-buck-1dvev?file=/src/index.js