Question

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

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
}

我为其余的道具设置了默认值{}，我也使用对象解构将其传递给Button组件。

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

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

我正在为完整性添加道具类型和默认道具，但如果需要，我不是百分之百确定。

谢谢。

Answer 1

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

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

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

编辑：向defaultProps添加“rest”prop实际上有“效果”，这将导致rest参数包含rest: {}属性，并依次将其传递给Button组件示例

回答你的问题

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

不，使用spread运算符只提供用户定义的键。因此，您将找不到Object的任何属性。

没有为其余部分指定默认值是否有任何问题道具？

正如我所说，为休息参数指定默认值不会产生任何影响。

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

如果您将其余的参数传递给孩子，则没有必要为休息参数中存在的属性设置默认道具。

这很好。

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

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

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

对将在React组件中进行解构的props的默认值的影响

1 个答案: