如何为对象类型设置 React 默认道具答案

【问题标题】：How to set React default props for object type如何为对象类型设置 React 默认道具
【发布时间】：2022-04-02 03:43:10
【问题描述】：

我们已经知道，如何设置 defaultProps。

TestComponent.defaultProps = {
    isTest: true
};

但我经常使用道具作为对象类型。

在父级中，

render(){
    let sample = {
        isTest : true,
        isLoggedIn : true
    }
    return (
        <div>
            <TestComponent sample = {sample} />
        </div>
    )
}

在子组件中，我想将isLoggedIn 设置为false 作为默认值。如果未设置（或未从 Parent 传递）isLoggedIn，则默认值为 true

但我不知道如何为object type设置defaultProps

TestComponent.defaultProps = {
    sample : {
        isLoggedIn: false
    }
};

如何做到这一点？

【问题讨论】：

这不可能通过“传统”方式实现。您必须设置一个手动执行此检查的功能。几个月前我实际上回答了一个类似的问题。我会在下面链接它。
How to typecheck properties of an object prop in React?的可能重复

标签： reactjs

【解决方案1】：

你的代码

TestComponent.defaultProps = {
  sample : {
    isLoggedIn: false
  }
};

应该可以。

对于类型验证 (propTypes)，请使用 React.PropTypes.shape 用于嵌套对象道具，如下所示：

React.PropTypes.shape({
  isLoggedIn: React.PropTypes.bool
})

查看文档：https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

【讨论】：

看起来是类型检查。有没有办法在对象类型中设置默认道具？
代码有效。谢谢。但我想设置一个默认道具。或者，我选择使用这种状态的方式，在构造函数this.state = { isLoggedIn : (typeof props.sample.isLoggedIn == "undefined") ? false : props.sample.isLoggedIn }
@CodinCat 您只能为隐式props 声明值。 isLoggedIn 不是 prop 而是 sample 的属性。我很确定您在上面展示的内容是不可能的。或者你能做一个工作小提琴吗？
该代码仅在您未通过“sample”道具时才有效。但是如果你传递它就像假设一个空对象一样，跳过“isLoggedIn”值，那么 defaultProp 将不会被应用。试试看：codepen.io/anon/pen/aVoZLY?editors=1010

【解决方案2】：

我想我遇到了同样的情况，并像下面这样解决了（它看起来不是最好的解决方案，但它正在工作）：

const defaultSample = {
    isLoggedIn: false,
    isTest: true
}
let { sample = defaultSample } = props; // if doesn't have a sample, it will receive the default, if it does, will just receive the sample past by its parent
sample =  { ...defaultSample, ...sample } // first receive the default properties, than the sample to replace the existed default..

【讨论】：

【解决方案3】：

如果我有 50 名声望，我会评论 Breno Oliveira 的答案，我在稍作修改后成功使用了该答案。谢谢布雷诺！

function TestComponent(props)
{
    let propsSample = {...props.sampleDefault, ...props.sample};
    const [isLoggedIn,setIsLoggedIn] = useState(propsSample.isLoggedIn);
    ...
}

TestComponent.defaultProps = {
    ...
    sampleDefault: {
        isLoggedIn: false
    }
}

正如@mayid 在@CodinCat 回答的cmets 中所说，如果将'sample' 对象传递到props 中，则不会应用sample 的defaultProp 值。

【讨论】：