关键词：
【中文标题】如何使用钩子将 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)
【讨论】：
如何将类组件转换为功能组件？
】如何将类组件转换为功能组件？【英文标题】：howtoconvertclasscomponenttofunctioncomponent?【发布时间】：2022-01-0821:27:22【问题描述】：我是React新手，我正在尝试将下面的代码转换为函数组件，但它不起作用，我从未使用过类组件。... 查看详情
如何使用 React Hooks 将具有构造函数的类转换为功能组件？
】如何使用ReactHooks将具有构造函数的类转换为功能组件？【英文标题】：HowcanIconvertaclasswithaconstructortoafunctionalcomponentusingReactHooks?【发布时间】：2021-07-0404:15:19【问题描述】：如何使用ReactHooks将以下带有构造函数的类转换为功... 查看详情
react中从类重构为功能钩子组件
...钩的组件，并被这个回调setState代码块所吸引，并且无法使用有效的挂钩来实现这一点：this.setState((prevState)=>(items: 查看详情
使用反应挂钩将基于类的组件转换为功能组件[重复]
...组件中，使用this.setState更新我的状态很容易，但是对于如何实现的钩子，我很困惑？例 查看详情
如何将firebase与react功能组件同步？
】如何将firebase与react功能组件同步？【英文标题】：Howtosyncfirebasewithreactfunctionalcomponents?【发布时间】：2020-08-0411:33:50【问题描述】：我正在构建一个简单的React应用程序，使用功能组件（而不是类）。因此，在将数据库与状态... 查看详情
如何将 React 类组件转换为函数组件
】如何将React类组件转换为函数组件【英文标题】：HowtoconvertaReactClassComponenttoaFunctionComponent【发布时间】：2020-02-0110:02:20【问题描述】：我想在画布内显示图像。我将其作为类组件进行，但我的要求是使用函数组件：classCanvasexte... 查看详情
将功能组件代码转换为类组件代码
...7【问题描述】：我是React中的函数式组件的新手，想知道如何将下面的代码从基于函数的代码转换为基于类的代码。我试过了，但在“React.useEffect”方面遇到了麻烦。任何帮助将不胜感激！:)（还有一个问题，你会说我学习功能... 查看详情
如何使用 useState - 钩子将类组件（输入，条件）更改为功能组件？
】如何使用useState-钩子将类组件（输入，条件）更改为功能组件？【英文标题】：Howtochangeaclasscomponent(input,conditional)tofunctionalcomponentwithuseState-hook?【发布时间】：2020-01-2311:48:54【问题描述】：我想将工作类组件更改为功能组件。... 查看详情
如何使用 Async / Await 和 React 钩子？
】如何使用Async/Await和React钩子？【英文标题】：HowtouseAsync/AwaitwithReacthooks?【发布时间】：2020-10-0404:32:00【问题描述】：我正在学习React并遵循视频教程。讲师使用了类组件，而我正在使用功能组件来复习钩子概念。我想将此代... 查看详情
将 React 函数组件转换为类组件问题
...2711:31:21【问题描述】：我有以下react功能组件来帮助支持使用react-router进行身份验证所需的路由。constPrivateRoute=(component:Component,...rest)=>(<Route... 查看详情
如何防止我的功能组件使用 React 备忘录或 React 钩子重新渲染？
】如何防止我的功能组件使用React备忘录或React钩子重新渲染？【英文标题】：HowcanIpreventmyfunctionalcomponentfromre-renderingwithReactmemoorReacthooks?【发布时间】：2019-07-2314:56:06【问题描述】：当hiddenLogo改变值时，组件被重新渲染。我希... 查看详情
如何使用 React 钩子测试功能组件内部的功能？
】如何使用React钩子测试功能组件内部的功能？【英文标题】：HowtotestfunctionsinsidefunctionalcomponentswithReacthooks?【发布时间】：2021-04-1323:39:26【问题描述】：我有一个使用useState钩子的功能组件，如下所示：importReact,useStatefrom\'react\'... 查看详情
反应：从类转换为具有状态的功能组件
...ponentwithstate【发布时间】：2021-02-2120:47:59【问题描述】：如何将类组件转换为函数式组件？importReact,Componentfrom\'react\'classTestextendsComponentstate=value:"testtext",isInEditMode:f 查看详情
React Native Jest - 如何使用多个钩子测试功能组件？无法存根 AccessiblityInfo 模块
】ReactNativeJest-如何使用多个钩子测试功能组件？无法存根AccessiblityInfo模块【英文标题】：ReactNativeJest-HowtotestFunctionalcomponentwithmultiplehooks?UnabletostubAccessiblityInfomodule【发布时间】：2022-01-1601:37:15【问题描述】：我正在尝试为我最... 查看详情
如何将类组件转换为功能组件？
】如何将类组件转换为功能组件？【英文标题】：HowcanIconvertclasscomponenttofunctionalcomponent?【发布时间】：2021-11-0701:40:31【问题描述】：我有一个基于类的组件，我想转换为基于函数的组件，我的代码如下：importenableRipplefrom\'@syncfu... 查看详情
如何将类组件重写为 React Functional？
】如何将类组件重写为ReactFunctional？【英文标题】：HowtorewriteclasscomponenttoReactFunctional?【发布时间】：2021-09-0103:12:33【问题描述】：我是React新手，正在学习基础知识，但现在我需要重写一个Class组件才能使用ReactHooks。所以我想... 查看详情
将类重构为 React 中的功能组件
】将类重构为React中的功能组件【英文标题】：RefactorclasstofunctioncomponentsinReact【发布时间】：2021-12-2800:48:30【问题描述】：我很难将这3个类组件转换为函数组件，类组件正在工作，我只是想将它们转换为学习目的。API调用：yelp.... 查看详情
将功能组件转换为类组件（ReactJS）的问题
】将功能组件转换为类组件（ReactJS）的问题【英文标题】：Probleminconvertingfunctionalcomponenttoclasscomponent(ReactJS)【发布时间】：2020-10-1717:20:48【问题描述】：这是我的功能组件。工作正常importReactfrom"react";functionRecommendationCard(props)con... 查看详情