Reactjs 语法错误-React js Render中的条件语句

我是REACT.js新手，非常感谢您的建议

我有一个类别的清单，我已经把一个职位下 仅当存在类别时，我才想显示类别 我不确定为什么会出现语法错误——一遍又一遍地查看它 我尝试了以下方法：

但我得到了一个错误： 未能编译

下面是我的档案

app/scr/components/Blog/Index.js

import Layout from '../../components/Layout/Layout';
import { Link } from 'react-router-dom';
    
class Index extends Component {
  render() {
    return(
      <Layout>
        <ul>
          {this.props.posts.map((post) => {
            if (post) {
              return(
                <li key={post.ID} className="card">
                  <div>{post.title}</div>
                  <div>{post.date}</div>
                  <span className="categories">
                    {
                      if (post.categories) {
                        Object.values(post.categories).slice(0, 1).map((category) => {
                          return(
                            <span>{category.name}</span>
                          );
                        })
                      } else {
                        return null;
                      } 
                    }
                  </span>
                </li>
              );
            } else {
              return null;
            }
          })}
        </ul>
      </Layout>
    );
  }
}

export default Index;
  

---

您没有正确使用内联条件

你应该这样做：

<span className="categories">
  {post.categories ?
    Object.values(post.categories).slice(0, 1).map((category) => {
      return(
        <span>{category.name}</span>
      );
    }) : null}
</span>

---

您可以在React中阅读更多关于条件的信息，更具体地说，可以阅读关于内联条件的信息

您没有更广泛地正确使用if statement：您只能在JSX中插入JavaScripts表达式，而不能插入语句，尽管它们可以是函数表达式，函数表达式的主体可以包含语句。。。。想一想JSX将被传输到什么JS，应该很清楚为什么。

<span className="categories">
  {post.categories ?
    Object.values(post.categories).slice(0, 1).map((category) => {
      return(
        <span>{category.name}</span>
      );
    }) : null}
</span>