Question

我不想在描述为空时呈现标题

var description = <MyElement />; // render will return nothing in render in some cases

if (!description) { // this will not work because its an object (reactelement)
    return null;
}

<div>
     {title}
     {description}
</div>

什么是正确的方式而不是！描述来检查它是否为空？

Answer 1

var description, title;

if (this.props.description) {
    description = <Description description={this.props.description} />;

    if (this.props.title) {
      title = <Title title={this.props.title} />;
    }
}

<div>
     {title}
     {description}
</div>

或者：

render() {
  const { description, title } = this.props;

  return (
    <div>
       {title && description && <Title title={title} />}
       {description && <Description description={description} />}
    </div>
  );
}

Imo更好的做法是，如果不需要你的描述元素，那么它不会被渲染，而不是在它的渲染中返回null。因为您可能会通过道具发送数据。同样，如果您根本不想渲染此组件，那么这应该发生在父组件中。

检查反应元素是否为空

1 个答案: