时间戳

首页 > 解决方案 > 对映射数据执行条件渲染操作 - React

javascript - 对映射数据执行条件渲染操作 - React

问题描述

我在返回的渲染中映射数据，但我想对已映射的数据执行条件......是否可以做这样的事情？

export default function App() {
  const prod = [
    {'name': '1'},
    {'name': '2'},
    {'name': '3'}
  ];

  return (
    <div className="App">
      {prod && (
        <div>
          {prod.map(p => (

            // This is the point I get an error
            {p.name === '1' && (
              <h1>This is 1</h1>
            )}

          ))}
        </div>
      )}
    </div>
  );
}

目前我收到一个错误：

Unexpected token, expected "," (16:14)

  14 |         <div>
  15 |           {prod.map(p => (
> 16 |             {p.name === '1' && (
     |               ^

标签： javascriptreactjs

解决方案

具有格式的箭头函数x => ()返回括号的内容。

所以你正在返回编译器认为是一个对象，因为它被包裹在大括号中x => ({ ... })你需要删除大括号：

prod.map(p => (
    p.name === '1' && <h1>This is 1</h1>
)

或显式返回值：

prod.map(p => {
    return p.name === '1' && <h1>This is 1</h1>
}

推荐阅读