jsx 中的三元运算符包含 html 与反应

Question

我正在使用 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>
}

现在 html

中只显示 return (this.state.message === 'failed') ? ( =>

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

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

Answer 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 语句只能包含表达式，因此您必须在其他地方执行这些操作..

Answer 4

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

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

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

Answer 6

鉴于上述答案，您还可以直接在 render() 中 return 来自 return() 的三元表达式

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

在 function1() 和 function2() 中，您可以 return 您的观点。

Answer 7

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

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

jsx 中的三元运算符包含 html 与反应

ternary operator in jsx to include html with react

javascript

jsx

reactjs