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类的灰色斑点。

Answer 1

当你创建jsx元素时，你不是在创建字符串，而是在创建函数（在引擎盖下）。在jsx元素之间，您可以在花括号之间绑定数据

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>
  )
}

布尔值不会出现在jsx中，因此如果this.state.myString !== ''为false，则不会显示任何内容。通常你会看到truthy / falsey值通过doublebangs转换为boolean - 所以这也适用：

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

在具有三元条件的ReactJS中将html附加到状态变量

1 个答案: