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

【问题标题】：How do I set default props for a component wrapped in a Raley container?如何为包装在 Raley 容器中的组件设置默认道具？
【发布时间】：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。这可能不适用于您的情况。

标签： reactjs graphql relayjs relay

【解决方案1】：

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

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

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

【讨论】：