通过三元运算符映射数组赋值失败？答案

【问题标题】：Mapped array assignment through ternary operator fails?通过三元运算符映射数组赋值失败？
【发布时间】：2019-11-05 02:30:42
【问题描述】：

我是 reactjs 新手，我正在尝试使用三元运算符根据条件渲染 jsx，但它会引发错误：Line 22: Expected an assignment or function call and instead saw an expression no-unused-expressions。这是代码：

const posts = this.state.posts.length > 0 ?
            this.state.posts.map(elem=>{
                <div class="col s12 m7">
                    <h2 class="header">{elem.title}</h2>
                    <div class="card horizontal">
                        <div class="card-stacked">
                            <div class="card-content">
                                <p>{elem.body}</p>
                            </div>
                            <div class="card-action">
                                <a href="#">This is a link</a>
                            </div>
                        </div>
                    </div>
                </div>
            })
            :null;

如果this.state.posts.length > 0 为真，我尝试在括号中包含( ) 的第一个返回值，但不好。提前致谢。

【问题讨论】：

标签： javascript reactjs ternary-operator arrow-functions

【解决方案1】：

您需要从传递给map 方法的函数中返回jsx。

在传递给map方法的函数中使用return。

const posts =
  this.state.posts.length > 0
    ? this.state.posts.map(elem => {
        return (
          <div className="col s12 m7">
            <h2 className="header">{elem.title}</h2>
            <div className="card horizontal">
              <div className="card-stacked">
                <div className="card-content">
                  <p>{elem.body}</p>
                </div>
                <div className="card-action">
                  <a href="#">This is a link</a>
                </div>
              </div>
            </div>
          </div>
        );
      })
    : null;

您也可以使用() 来表示隐式return。

const posts =
  this.state.posts.length > 0
    ? this.state.posts.map(elem => (
        <div className="col s12 m7">
          <h2 className="header">{elem.title}</h2>
          <div className="card horizontal">
            <div className="card-stacked">
              <div className="card-content">
                <p>{elem.body}</p>
              </div>
              <div className="card-action">
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>
      ))
    : null;

在 jsx 中也使用 className 表示 class。

【讨论】：