Question

在构建React应用程序时，我发现自己在处理空值时遇到了困难。

例如，在名称中欢迎用户：

Hello

如果name为null，我不会呈现const Name = ({value}) => value ? <b>Hello {value}</b> : null。

我可以添加一个if语句或三元错误处理，这是令人烦恼和冗长的：

java.awt.Shape

或者我可以使用某种Maybe构造来有条件地渲染更令人烦恼和冗长的组件。

我有一个很好的选择吗？

Answer 1

我能想到的唯一更短的是&&语法。也许你可以做到

const Name = ({value}) => <b>Hello {value}</b>

class WelcomeMsg extends React.Component {
  constructor(props){
    super(props)
  }

  render() {
    return (
      <div>
        { this.props.userName && <Name value={ this.props.userName }/> }
      </div>
    )
  }
}

如果您不想在父组件中执行此操作，则可以将&&移至<Name />。

在React中比null分支更好地解决空值处理问题？

1 个答案: