我正在关注Udemy的教程,教师正试图解释HOC.
为了解释HOC,他创建了一个具有功能组件的功能(至少这是他所说的).这是代码:
const withClass = (WrappedComponent,className) => {
return (props) => (
React文档显示了这个示例:
function Welcome(props) {
return
并提到:
This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.
[题]
简单来说,可以肯定地说:任何以道具为参数的函数都可以归类为功能组件吗?如果没有,有人可以简单地解释一下React中的功能组件吗?
最佳答案
Any function which takes props as an argument can be classified as
a functional component?
不,道具只是函数参数,就像所有其他正常的函数参数一样.因此,如果我们定义接受参数的任何函数,它不一定是React功能组件,就像这不是React组件:
const Testing = props => {
const a = 10;
return a * props.a;
}
重要的部分是“如果该组件返回一个React元素”,那么它才会成为React功能组件.
为了更清楚,只需在单独的文件中定义下面的函数;你转换时不会抛出任何错误:
const Test = props => props.key * 10;
但是如果你在一个单独的文件中定义下面这个组件而不导入React,它会抛出错误,当你转换时没有定义React:
const Test = props =>
因为JSX将转换为React.createElement(….)并且将需要React.上述组件的converted version将是:
var Test = function Test(props) {
return React.createElement(
"div",null,props.key * 10
);
};
我建议,使用Babel REPL并定义两个函数并检查输出.
原文链接:https://www.f2er.com/js/429262.html