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

Posted 2023-02-22

【中文标题】如何使用钩子将 React 类组件转换为功能组件

【英文标题】：How to convert React class component to functional component with hooks

【发布时间】：2021-04-26 00:54:39

【问题描述】：

我正在 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>
        );
      
    

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