Javascript jsx中的三元运算符以包含带有反应的html

ternary operator in jsx to include html with react

提问by Modelesq

I'm using react and I'm trying to display this error message if this.state.message === 'failed'. But I'm really not sure why this ternary operation isn't working. What am I doing wrong here?

我正在使用 react，如果this.state.message === 'failed'. 但我真的不知道为什么这个三元操作不起作用。我在这里做错了什么？

render() {
...
<div className="row">
return (this.state.message === 'failed') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>

Right now its just displaying return (this.state.message === 'failed') ? ( =>in the html

现在它只是显示return (this.state.message === 'failed') ? ( =>在 html 中

回答by Nathan

I currently like to format my ternaries like this in react:

我目前喜欢在反应中像这样格式化我的三元组：

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

You are correct that IIFEs can be used within a render statement as well as ternary expressions. Using a normal if .. elsestatement is valid, but the renderfunction's return statement can only contain expressions so you would have to do those elsewhere..

您是正确的，IIFE 可以在渲染语句以及三元表达式中使用。使用普通if .. else语句是有效的，但render函数的 return 语句只能包含表达式，因此您必须在其他地方执行这些操作。

回答by Matis Lepik

The syntax for ternary is condition ? if : else. To be safe, you can always wrap the entire ternary statement inside parenthesis. JSX elements are also wrapped in parenthesis. The fat arrow in an arrow function is always preceeded by two parenthesis (for the arguments) - but you don't need any functions here anyway. So given all of that, there are a couple of syntax errors in your code. Here's a working solution:

三元的语法是condition ? if : else. 为安全起见，您始终可以将整个三元语句括在括号内。JSX 元素也包含在括号中。箭头函数中的粗箭头总是前面有两个括号（用于参数）——但无论如何你都不需要任何函数。因此，考虑到所有这些，您的代码中存在一些语法错误。这是一个有效的解决方案：

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Edit: if this is inside other markup, then you don't need to call render again. You can just use curly braces for interpolation.

编辑：如果这是在其他标记中，那么您不需要再次调用渲染。您可以只使用花括号进行插值。

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}

回答by Aayushi

Given the above answers, you can also directly return a ternary expression from return()in your render()like this

鉴于上述答案，您也可以像这样直接从return()in返回一个三元表达式render()

return condition? this.function1(): this.function2();

and inside function1() and function2() you can return your views.

在 function1() 和 function2() 中，您可以返回您的视图。

回答by Elod Szopos

You should try this:

你应该试试这个：

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}

回答by Nikolay Podolnyy

For using variable inside ternary use brackets again

要在三元内部使用变量，请再次使用方括号

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}

回答by Kenigmatic

The accepted answer by @Nathan and other similar answers are correct. But it's worth noting that the result for ?and the result for :must each be a single element or wrapped in a single element (or the result may be null | undefined, either of which qualifies as a single element). In the example below, the result for ?will work but the result for :will fail....

@Nathan 和其他类似答案接受的答案是正确的。但值得注意的是，结果 for?和结果 for 都:必须是单个元素或包裹在单个元素中（或者结果可能是null | undefined，其中任何一个都可以作为单个元素）。在下面的示例中，结果 for?将起作用，但结果 for:将失败....

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)