如何使用钩子将 React 类组件转换为功能组件答案

【问题标题】：How to convert React class component to functional component with hooks如何使用钩子将 React 类组件转换为功能组件
【发布时间】：2023-03-25 11:40:01
【问题描述】：

我正在 Reactjs 中创建一个降价预览器，用户在 textarea 标记中输入降价，转换后的降价显示在 div 标记中。目前，该项目在一个类组件中，我想知道如何将其转换为带有钩子的功能组件，因为在我拥有的另一个项目中实现它会更容易。我环顾四周，似乎找不到任何对我有很大帮助的东西，尤其是关于如何转换构造函数。任何帮助将不胜感激！

 export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          markdown: "",
        };
      }
    
      updateMarkdown(markdown) {
        this.setState({ markdown });
      }
    
      render() {
        return (
          <div className="App">
            <div className="container">
              <div className="row mt-4">
                <div className="col text-center">
                  <h1>
                    {" "}
                    <Badge className="text-align-center" variant="light">
                      Markdown Previewer
                    </Badge>
                  </h1>
                </div>
              </div>
    
              <div className="row mt-4">
                <div className="col-md-6">
                  {" "}
                  <div className="col text-center">
                    <h4>
                      <Badge className="text-align-center" variant="secondary">
                        Markdown Input
                      </Badge>
                    </h4>
                  </div>
                  <div className="input" style={inputStyle}>
                    <textarea
                      className="input"
                      style={inputStyle}
                      value={this.state.markdown}
                      onChange={(e) => {
                        this.updateMarkdown(e.target.value);
                      }}
                    >
                    </textarea>
                  </div>
                </div>
    
                <div className="col-md-6">
                  {" "}
                  <div className="col text-center">
                    <h4>
                      <Badge className="text-align-center" variant="secondary">
                        Preview
                      </Badge>
                    </h4>
                  </div>
                  <div
                    style={outputStyle}
                    dangerouslySetInnerHTML={{
                      __html: marked(this.state.markdown),
                    }}
                  ></div>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }

【问题讨论】：

标签： javascript html reactjs react-hooks

【解决方案1】：

这样的事情应该可以工作：

const App = () => {
  const [markdown, setMarkdown] = React.useState('')

  return (
    <div className="App">
      {...other html}
      <textarea
        value={markdown}
        onChange={(e) => setMarkdown(e.target.value)}
      </textarea>
      {...other html}
    </div>
  )
}

对您来说最大的变化将是react state hook。希望我的示例清楚地展示了如何将类组件状态转换为反应钩子。您还可以将onChange 方法移动到返回上方的自己的函数中。比如……

const [markdown, setMarkdown] = React.useState('')

const handleChange = (e) => setMarkdown(e.target.value)

return (...)

【讨论】：

【解决方案2】：

import React, { useState } from 'react';

export default function App(props) {
  const [markdown, setMarkDown] = useState("");
  const updateMarkdown = (markdown) => {
    setMarkDown(markdown);
  }

  return (
    <div className="App">
      <div className="container">
        <div className="row mt-4">
          <div className="col text-center">
            <h1>
              {" "}
              <Badge className="text-align-center" variant="light">
                Markdown Previewer
                </Badge>
            </h1>
          </div>
        </div>

        <div className="row mt-4">
          <div className="col-md-6">
            {" "}
            <div className="col text-center">
              <h4>
                <Badge className="text-align-center" variant="secondary">
                  Markdown Input
                  </Badge>
              </h4>
            </div>
            <div className="input" style={inputStyle}>
              <textarea
                className="input"
                style={inputStyle}
                value={markdown}
                onChange={(e) => {
                  updateMarkdown(e.target.value);
                }}
              >
              </textarea>
            </div>
          </div>

          <div className="col-md-6">
            {" "}
            <div className="col text-center">
              <h4>
                <Badge className="text-align-center" variant="secondary">
                  Preview
                  </Badge>
              </h4>
            </div>
            <div
              style={outputStyle}
              dangerouslySetInnerHTML={{
                __html: marked(markdown),
              }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  )
}

我在这里所做的是：

用函数替换类
已删除构造函数
类方法在函数内部不起作用，因此将它们全部转换为函数（闭包）。
使用的 React 钩子 (useState)

【讨论】：