Question

我正在关注一个教程，但我对其箭头版本及其功能版本感到困惑。我有一个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

然后将LoaderButton导入并在我的Login.js中使用：

export default function Login() {
  const history = useHistory();
  const { userHasAuthenticated } = useAppContext();
  const [isLoading, setIsLoading] = useState(false);
  const [fields, handleFieldChange] = useFormFields({
    email: "",
    password: ""
  });

  function validateForm() {
    return fields.email.length > 0 && fields.password.length > 0;
  }

  async function handleSubmit(event) {
    event.preventDefault();

    setIsLoading(true);

    try {
      await Auth.signIn(fields.email, fields.password);
      userHasAuthenticated(true);
      history.push("/");
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }

  return (
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
          <ControlLabel>Email</ControlLabel>
          <FormControl
            autoFocus
            type="email"
            value={fields.email}
            onChange={handleFieldChange}
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="password"
            value={fields.password}
            onChange={handleFieldChange}
          />
        </FormGroup>
        <LoaderButton
          block
          type="submit"
          bsSize="large"
          isLoading={isLoading}
          disabled={!validateForm()}
        >
          Login
        </LoaderButton>
      </form>
    </div>
  );
}

标准功能组件按预期工作。

但是箭头功能组件似乎已将isLoading固定为true AND收到此错误：

Warning: Failed prop type: Invalid prop `disabled` of type `object` supplied to `Button`, expected `boolean`.

我认为箭头功能组件应该是编写功能组件的一种更简单的方法。

我一直认为它与绑定有关，因此以某种方式绑定我具有不同属性的道具，但是我找不到关于它们绑定差异的任何信息。我以为如果我的Login.js根据其编写方式进行绑定，那我应该还好吗？

老实说，我更喜欢使用箭头函数语法编写。

Answer 1

它们不是相当。您没有正确破坏道具。用{}包裹所有道具，以便您的功能组件采用一个props参数。

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

箭头功能React组件不同于“等效”组件

1 个答案: