将在 React 组件中解构的 props 的默认值的影响答案

【问题标题】：Effects of default value for props that will be destructured in a React Component将在 React 组件中解构的 props 的默认值的影响
【发布时间】：2018-03-21 17:40:01
【问题描述】：

假设我有一个像这样的简单组件（假设所有内容都正确导入）：

const SpecialButton = (props) => {

    const { css, ...rest } = props;

    return (
        <Button 
            className={`special-btn ${css}`}
            {...rest}
        >
            Click here
        </Button>
    );
};

SpecialButton.defaultProps = {
    css: '',
    rest: {}
};

SpecialButton.propTypes = {
    css: PropTypes.string,
    rest: PropTypes.object
}

我正在为其余的 props 设置默认值 {}，并且我还使用对象解构将其传递给 Button 组件。

所以，假设使用 SpecialButton 的人除了 css 道具之外没有传递任何其他东西，我的问题是：

由于 {} 是 Object 类的一个实例，所以当我使用 ... 时，它是否会将 Object 的所有属性转储到 Button 组件中？
不为其余的props指定默认值有什么问题吗？
你们对如何处理这个案子有更好的建议吗？

为了完整起见，我添加了道具类型和默认道具，但我不能 100% 确定是否需要。

谢谢。

【问题讨论】：

标签： javascript reactjs web ecmascript-6 react-props

【解决方案1】：

我假设您正在从“道具”中解构 css 和 rest params。

const { css, ...rest } = props;

现在rest 不是 props 对象的属性，解构后它具有除 css 属性之外的所有 props 属性。

编辑：实际上有一个“效果”，即向 defaultProps 添加一个“rest”道具，这将导致 rest 参数包含一个 rest: {} 属性，然后将其传递给本示例中的 Button 组件。

回答你的问题

由于 {} 是 Object 类的一个实例，所以当我使用 ... 时它将Object的所有属性转储到Button组件中？

不，使用扩展运算符只会给出用户定义的键。所以你不会找到 Object 的任何属性。

不给其余部分指定默认值有什么问题吗道具？

正如我所说，为剩余参数分配默认值不会有任何效果。

你们对如何处理这个案子有更好的建议吗？

如果您将其余参数传递给子项，则无需为将出现在其余参数中的属性设置默认道具。

这很好。

SpecialButton.defaultProps = {
    css: '',
};

SpecialButton.propTypes = {
    css: PropTypes.string,
}

当您需要将 proptypes 应用到对象时，也可以使用 PropTypes.shape 而不是 PropTypes.object。

【讨论】：

谢谢@vs1682！