web-dev-qa-db-ja.com

反応要素が空かどうかを確認します

説明が空のときにタイトルをレンダリングしたくない

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>

！descriptionの代わりに、空かどうかを確認する正しい方法は何ですか？

javascriptreactjsreact-jsx
8
Alexander Schranz
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は、description要素が必要ない場合は、レンダリングでnullを返すのではなく、レンダリングしないことをお勧めします。小道具を介してデータを送信する可能性が高いためです。同様に、このコンポーネントをまったくレンダリングしたくない場合は、親で行う必要があります。

3
Dominic