Question

我有一个包含在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-as-a-service提供程序，当foo的{{1}}属性不存在时，它返回{{1} }，当我的组件尝试渲染WidgetData

时抛出

据我所知，null只有在道具为props.null.bar时才有效，而不是在defaultProps时。

在这种情况下，如何使用undefined保护null结果？

如果可能的话，希望避免为每个null我引用写一个保护声明。

Answer 1

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

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

有关详细信息，请结帐：https://github.com/bfwg/relay-gallery

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

1 个答案: