Javascript 箭头功能反应组件不同于；等价物；对应方

我正在学习一个教程，我对它的箭头版本和函数版本感到困惑。 我有一个LoaderButton.js，我可以将该组件作为普通功能组件或箭头组件编写：

export default function LoaderButton({
  isLoading,
  className = "",
  disabled = false,
  ...props
}) {
  return (
    <Button
      className={`LoaderButton ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
      {props.children}
    </Button>
  );
}

const LoaderButton = (
  isLoading,
  className = "",
  disabled = false,
  ...props ) => (
    <Button
      className={`LoaderButton ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
      {props.children}
    </Button>
  )


export default LoaderButton

功能组件：

export default function LoaderButton({
  isLoading,
  className = "",
  disabled = false,
  ...props
}) {
  return (
    <Button
      className={`LoaderButton ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
      {props.children}
    </Button>
  );
}

const LoaderButton = (
  isLoading,
  className = "",
  disabled = false,
  ...props ) => (
    <Button
      className={`LoaderButton ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
      {props.children}
    </Button>
  )


export default LoaderButton

我认为arrow函数组件应该是编写函数组件的一种更简单的方法

我一直认为这与绑定有关，因此它以某种方式绑定了道具。我有不同的道具，但我找不到任何关于它们绑定差异的信息。我想如果我的Login.js是按照它的编写方式绑定的，那么我应该没事吧

老实说，我更喜欢使用arrow函数语法进行编写。

它们并不完全相同。你没有正确地分解道具。用

{}

包装所有的道具，这样您的功能组件就可以使用一个

道具

参数

const LoaderButton = ({
  isLoading,
  className = "",
  disabled = false,
  ...props
}) => (
  <Button
    className={`LoaderButton ${className}`}
    disabled={disabled || isLoading}
    {...props}
  >
    {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
    {props.children}
  </Button>
);

export default LoaderButton

const LoaderButton=({
孤岛，
className=“”，
禁用=错误，
…道具
}) => (
{isLoading&&}
{props.children}
);
导出默认加载按钮

啊，哇！那么读到

disabled=false，…props

？@KyleCalica St No，

isLoading

是第一个参数。React会将其解读为“道具”，而忽略其余部分。