Question

我想在我的React组件中添加内联条件，但我不明白为什么，React在行posts.length ?上返回意外的令牌，预期：

class PostList extends Component {

  getPosts() {
    const posts = Post.find().fetch();
    return posts;
  }

  render() {
    const posts = this.getPosts();
    return (
      {posts.length ?
        <ul>
          {posts.map((post) => (
            <PostItem key={post.title} post={post} />
          ))}
        </ul>
      }
    );
  }

}

有人有想法吗？我的条件是错的？

谢谢社区！

Answer 1

当表达式评估为null时返回false。也不要使用{}，请使用此()

class PostList extends React.Component {
    
      getPosts() {
        //const posts = Post.find().fetch();
       const posts = ["post1","post2"]
        return posts;
      }
    
      render() {
        const posts = this.getPosts();
        return (
            posts.length ?
              <ul>
                {posts.map((post) => (
                  <PostItem key={post.title} post={post} />
                ))}
              </ul>:
              null
        )
      }
    
    }
    
    class PostItem extends React.Component{
    render(){
      return (<div>{this.props.post}</div>)
    }
}

ReactDOM.render(<PostList />, document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

这是anuragasaurus回答的轻微语法变体。

如果没有＆＃34;否则＆＃34;在您的情况下，您不需要三元表达式condition ? value1 : value2。您可以使用Short-circuit evaluation：

当逻辑表达式从左到右进行评估时，它们会被测试   可能的＆＃34;短路＆＃34;评估使用以下规则：


false && (anything)短路评估为假。

true || (anything)短路评估为真。


逻辑规则   保证这些评估始终是正确的。请注意   以上表达式的任何部分都不会被评估，所以任何一方   这样做的效果不会生效。还要注意什么   上述表达式的一部分是任何单个逻辑表达式（如   括号表示。

class PostList extends Component {

  getPosts() {
    const posts = Post.find().fetch();
    return posts;
  }

  render() {
    const posts = this.getPosts();
    return (
      posts.length &&
        <ul>
          {posts.map((post) => <PostItem key={post.title} post={post} />)}
        </ul>
    );
  }    
}

React内联条件返回意外令牌，预期

2 个答案: