jsx 中的三元运算符包含 html 和 react答案

【问题标题】：ternary operator in jsx to include html with reactjsx 中的三元运算符包含 html 和 react
【发布时间】：2016-10-31 06:42:44
【问题描述】：

我正在使用反应，如果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>
}

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

【问题讨论】：

这看起来不像是有效的语法......我会在那里使用常规的if 语句。你为什么还要返回false？
您是否尝试将其包装在 {} 中？喜欢..{ this.state.message === 'failed' ? <div>Things</div> : null }

标签： javascript reactjs jsx

【解决方案1】：

你应该试试这个：

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

【讨论】：

渲染时页面上仍然显示return ( Everything in the world is fine );：\
更新到您对问题的最新编辑。如果您不希望返回任何内容，只需将 <span .. /> 替换为 undefined 或 null。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

我目前喜欢在 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>
  );
}

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

【讨论】：

也许是一个很好的 article 来了解 React 的条件渲染。

【解决方案4】：

对于在三元内使用变量再次使用括号

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

请记住，三元表达式应该包裹在Fragment或div中，如果不包裹会抛出编译错误

return (
        <Fragment>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </Fragment>
);

【讨论】：