如何为包装在 Raley 容器中的组件设置默认道具？

Posted 2023-03-08

【中文标题】如何为包装在 Raley 容器中的组件设置默认道具？

【英文标题】：How do I set default props for a component wrapped in a Raley container?

【发布时间】：2017-05-20 13:02:43

【问题描述】：

我有一个组件包装在 Relay 容器中：

const Widget = (props) => 
  return (
   <div>  props.foo.bar  </div>
  )


Widget.defaultProps =  foo: bar: 0 

export default Relay.createContainer(Widget, 
  fragments: 
     store: () => Relay.QL`
       fragment on WidgetData 
          foo 
             bar
          
        
        `
   
)

我使用 GraphQL 即服务提供程序作为后端，当 WidgetData 的 foo 属性不存在时，它返回 null，当我的组件尝试渲染时抛出props.null.bar

据我所知，defaultProps 仅在 prop 为 undefined 时有效，而在 null 时无效。

在这种情况下，如何使用defaultProps 防止null 结果？

如果可能，希望避免为我引用的每个 prop 编写保护语句。

【问题讨论】：

可以手动覆盖构造函数：const bar = props.foo || 'default' 和 <div> bar </div>

是的，这就是我现在正在做的事情，但是使用很多/深度嵌套的道具会变得非常乏味。 defaultProps 感觉更合身，尤其是。因为我已经为propTypes 定义了我的prop 形状

我已经通过将 Relay 查询向上移动到包含组件并传递结果来解决它。这样我就不会在我想使用defaultProps 的级别上使用 Relay。这可能不适用于您的情况。

【参考方案1】：

您可以对 Relay 容器中的道具进行完整性检查。

render() 
  let 
    foo,
    ...other
   = this.props;   
  let bar = foo ? foo.bar : '';
  return (
    <div>  bar  </div>
  )

欲了解更多信息，请结帐：https://github.com/bfwg/relay-gallery