javascript - destructured prop 中的 className 有时不适用于组件，这是一个错误吗？（下一个.JS）

Question

我有一个这样的组件：

import classNames from "classnames";

const Button = (props) => {
  const { className, children, ...rest } = props;
  const [internalProps, setInternalProps] = useState(rest);
  const [classes, setClasses] = useState("");

  const validateProps = () => {
    const tmp: Props = Object.assign(rest, {});
    const classes = [
      "btn",
      className,
      { "btn-block": block },
      { "btn-sm": size === "sm" },
      { "btn-lg": size === "lg" },
    ];

    setClasses(classNames(classes));
    setInternalProps(tmp);
  };

  useEffect(validateProps, [props]);

  return (
    <button className={classes} {...internalProps}>
      {children}
    </button>
  );
};

该className道具被取出，internalProps因为无论出于何种原因，当包含在其中时，有时在加载页面时不会应用这些类。我不知道为什么会这样，AFAIKclassName被视为 React 中的另一个道具。不过，我对 React 和 Next.JS 还是很陌生，所以我可能在这里遗漏了一些基本的东西。有没有人经历过这样的事情？

标签： javascriptreactjsnext.js

Answer 1

您设置internalProps为与 相同rest，并且rest不包括className。

这一行：

const { className, children, ...rest } = props

意思是：
从props取classNameand children，并将所有剩余的属性（不包括classNameand children）放入rest.