javascript - 使用三元条件将 html 附加到 ReactJS 中的状态变量

Question

我正在检查字符串是否为空，如果不是，我也想向其附加一些 html。然而，我尝试的似乎是将整个语句转换为字符串，而不是将其包装在 div 内。以下是我尝试过的两种方法。

var myVar = this.state.myString == '' ? '': '<div>'+this.state.myString+'</div>';
return(
   {myVar}
);

var myVar = this.state.myString == '' ? '': {'<div>'+this.state.myString+'</div>'};
return(
   <div className="container">
       {myVar}
   </div>
);

我只想显示存在的内容。

我尝试只返回状态，然后将其包装在 return(); 的 html 标签内。但对于按钮，它显示带有 bootstraps .btn 类的灰色 Blob 。

Answer 1

当您创建 jsx 元素时，您不是在创建字符串，而是在创建函数(在幕后)。在 jsx 元素之间，您可以在花括号之间绑定(bind)数据

var someElement = <div>{ this.state.myString }</div>

然后在渲染中:

render() {
  return (
   <div>{ someElement }</div>
  )
}

如果你想有条件地显示某个元素，你可以直接在jsx中执行此操作:

render() {
  return (
    <div>
      { this.state.myString !== '' && // if string is not empty add this div
      <div>{ this.state.myString }</div>
      }
    </div>
  )
}

bool 值不会出现在 jsx 中，因此如果 this.state.myString !== '' 为 false，则不会显示任何内容。通常您会看到 true/falsey 值通过 doublebangs 转换为 bool 值 - 所以这也有效:

{ !!this.state.myString && <div>{ this.state.myString }</div> }