Question

我正在尝试在React中进行条件渲染（仅在存在props时才映射和渲染）。

render() {
    if (this.props.res) {
      return(
        <div>{this.props.res.map(item => <li key={item.id}>{item.subreddit}</li>}</div>
      )
    } else {
      return null
    }
  }

但是我有这个错误：

Parsing error: Unexpected token, expected ","

为什么会这样，我该如何解决？或者以另一种方式，有没有更好的方式实现我的目的？

Answer 1

存在语法错误，map(...)没有右括号。

应该是：

<div>{this.props.res.map(item => <li key={item.id}>{item.subreddit}</li>)}</div>

Answer 2

这是我看到的问题：

map缺少右括号
检查数组长度（否则，空数组将返回true）
列表项应使用适当的标签包裹，例如<ul/>

render() {
    const { res } = this.props;
    return !res.length ? null : (
        <ul>{res.map(item => <li key={item.id}>{item.subreddit}</li>)}</ul>
    );
}

Answer 3

地图末尾缺少括号。

render() {

  return (
    <div>
      {
      this.props.res && this.props.res.map(item => (
        <li key={item.id}>{item.subreddit}</li>
      ))
     }
    </div>
  );

}

反应：仅在道具存在时映射

4 个答案: