React Component检查是否为空

Question

我有一个react组件，其中我在class / component /中也有一个变量

这是代码：

import React from 'react';

export class Header extends React.Component {
  constructor() {
    super();
    this.myvar = 'some text';
  }

  render() {
    return (
      <div>
        <div>{this.myvar}</div>
      </div>

    );
  }
}

如何检查“ myvar”是否为空以及上面的组件是否为空？

Answer 1

render() {
    return (
      <div>
        <div>{!!(this.myvar)?this.myvar:"whatever you want"}</div>//
      </div>

    );
  }

!! ：检查未定义，空值和空值

Answer 2

提供的解决方案违反了 eslint 的no-extra-boolean-casts规则。

使 eslint 满意的另一种方法如下所示：

render() {
    return (
      <div>
        <div>{!this.myvar ? "whatever you want" : this.myvar}</div>//
      </div>

    );
  }