如何将 React class 组件转换为带有钩子的功能组件

Question

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

 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>
        );
      }
    }

Answer 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 。 希望我的示例清楚地展示了如何将 class 组件 state 转换为反应挂钩。 你也可以将onChange方法移到它自己的 function 上面返回。 就像是...

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

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

return (...)

Answer 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>
  )
}

我在这里所做的是：

1. 将 class 替换为 function
2. 移除了构造函数
3. Class 方法在 function 中不起作用，因此将它们全部转换为函数（闭包）。
4. 使用过的 React 钩子 (useState)