Question

如果名称是undefined，我需要显示为空白，否则追加Hi 我正在使用React功能组件

let NamesComp = ({namesdata}) =>


  <div>
    <div className="srsPanel">
      <div className="crs">Name 1:</div>

      <div className="dse" ><div className="data">{(namesdata.name == undefined ? "":'Hi'{namesdata.name} </div></div>
    </div>

  </div>

Answer 1

您非常亲密：

let NamesComp = ({ namesdata }) =>
  <div>
    <div className="srsPanel">
      <div className="crs">Name 1:</div>
      <div className="dse">
        <div className="data">
          {namesdata.name === undefined ?
            "" :
            `Hi ${namesdata.name}`
          }
        </div>
      </div>
    </div>
  </div>

使用三重等于而不是双等于。

Answer 2

您可以执行类似this的操作：

kafka-console-consumer

有点干净：）

Answer 3

使用JS的ES6 +功能。比三元运算符更好的是将短路评估与&&一起使用。这样-如果namesdata.name上有任何值，它将被评估并打印名称。否则，如果没有namesdata.data，则此div中不会打印任何文本。

let NamesComp = ({namesdata}) =>
  <div>
    <div className="srsPanel">
      <div className="crs">Name 1:</div>
      <div className="dse"><div className="data">{(namesdata.name && `Hi${namesdata.name}`)} </div></div>
    </div>
  </div>

如何在React功能组件中使用三元运算符

3 个答案: