反应条件渲染

Question

我正在尝试找出 React 中的条件渲染。如果用户的观看列表中没有电影，我只想输出一个标题。我认为这样的事情会奏效：

render() {
    return (
        <Container>
            {this.state.watchlist.map(item => {
                if(this.state.watchlist.length > 0) {
                    return (
                        <WatchlistMovie
                            className="watchlist-movie"
                            key={item.id}
                            id={item.id}
                            title={item.title}
                            poster={item.poster}
                            overview={item.overview}
                            rating={item.rating}
                            user={this.props.user}
                        />
                    );
                } else {
                    return <h1>no movies</h1>
                }
            )}}
        </Container>
    );
}

Answer 1

我相信您想要 if-else 逻辑之外的 map

  <Container>
    {this.state.watchlist.length === 0 && <h1>no movies</h1>}

    {this.state.watchlist.map(item => (<WatchlistMovie
      className="watchlist-movie"
      key={item.id}
      id={item.id}
      title={item.title}
      poster={item.poster}
      overview={item.overview}
      rating={item.rating}
      user={this.props.user}
    />))}

  </Container>

Answer 2

您可以在 React 中使用我们所谓的 short circuit 评估进行条件渲染。

render() {
return (
  <Container>

    {this.state.watchlist.length > 0 && (this.state.watchlist.map(item => {
      <WatchlistMovie
        className="watchlist-movie"
        key={item.id}
        id={item.id}
        title={item.title}
        poster={item.poster}
        overview={item.overview}
        rating={item.rating}
        user={this.props.user}
      />)}
    {this.state.watchlist.length === 0 && (
       <h1>no movies</h1>)
     }
  </Container>

);
}
}

在这种类型的表达式中，如果第一个条件是 true 那么组件将在它之后被渲染，否则它将被忽略

Answer 3

有很多方法可以做到这一点，这个例子展示了如何使用三元来做到这一点。我认为这是一个更好看和更小的代码，但你也可以使用 Yury Tarabanko 的答案来做同样的事情

render() {
    return (
      <Container>
        {this.state.watchlist.length > 0 ?
            this.state.watchlist.map(item => 
                <WatchlistMovie
                    className="watchlist-movie"
                    key={item.id}
                    id={item.id}
                    title={item.title}
                    poster={item.poster}
                    overview={item.overview}
                    rating={item.rating}
                    user={this.props.user}
                />
            })
            :
            <h1>no movies</h1>            
        }
      </Container>

    );
  }
}

Answer 4

您的代码有问题，您在 this.state.watchlist.map 中检查了 this.state.watchlist.length > 0，并且您想在 length 显示时显示 h1 元素等于 0.
问题是 map() 函数遍历数组的所有元素，如果数组为空，则不会执行任何回调。

因此，在您的情况下，当 this.state.watchlist.length 等于 0 时，您甚至没有进入 map() 函数，因此您无法渲染 h1 元素。

正如许多用户建议的那样，您应该更改渲染方法：

render() {
    const movieCounter = this.state.watchlist.length;
    return (
        <Container>
            {movieCounter === 0
                ? <h1>no movies</h1>
                : this.state.watchlist.map(item =>
                    <WatchlistMovie
                        className="watchlist-movie"
                        key={item.id}
                        id={item.id}
                        title={item.title}
                        poster={item.poster}
                        overview={item.overview}
                        rating={item.rating}
                        user={this.props.user}
                    />
                )}
            }
        </Container>
    );
}

在这个例子中，发生的事情是你检查 movieCounter 是否等于 0：在这种情况下，你显示 h1 元素，否则你遍历所有电影并为每部电影显示一个 WatchlistMovie 组件。

反应条件渲染

React Conditional Rendering

conditional

reactjs

conditional-rendering