Question

这个组件很好地呈现：

const Footer = () => {
  let dataDiv = <div>Data is: Some data</div>;
  return (
    <div>
      {data ? dataDiv : ''}
    </div>
  )
}

但是如果我改变文字＆＃34;一些数据＆＃34;使用变量，那么dataDiv中的html不会正常呈现，而是作为纯文本：

const Footer = () => {
  let data = 'Some data';
  let dataDiv = <div>Data is: {data}</div>;
  return (
    <div>
      {data ? dataDiv : ''}
    </div>
  )
}

我想要显示或隐藏许多不同的数据属性，具体取决于它是否存在，如何以一种很好的方式在React中解决这个问题？

Answer 1

这是有效的语法并且工作正常，但有一些方法可以帮助清理它。

首先，我建议您在计划使用布尔值时使用Boolean（）

其次，我建议你在render方法中返回null而不是空字符串。

第三，由于您使用的是ES6箭头函数语法，因此您可以将模板文字用于字符串。

const Footer = () => {
  let data = 'Some data';
  let dataDiv = <div>`Data is: ${data}`</div>;
  return (
    <div>
      {Boolean(data) ? dataDiv : null}
    </div>
  )
}

Answer 2

相关，这是（布尔）道具的三元和跨度用法

<Component {... a ? { b: 1 } : { c: 1 } } />

避免在组件中使用三进制，这在某些情况下可以防止代码重复。

如何在三元运算符中使用变量/ prop

2 个答案: