ReactJS if语句或jsx文件中的条件

Question

我有这个应用程序可以把虚构的人的名字拼起来。我想看看我是否可以在 Name.jsx 中的映射中添加条件语句或 if 语句。如果是这样，我该怎么做？如果有人可以帮助我，那就太好了！如果 lastName 是特定名称，我希望它提取 firstName 和 lastName。

codesandbox

App.js

import "./styles.css";
import Name from "./Name";

const PEOPLE = [
  {
    firstName: "noah",
    lastName: "reyes"
  },

  {
    firstName: "elissa",
    lastName: "reyes"
  },

  {
    firstName: "ryan",
    lastName: "fink"
  },

  {
    firstName: "alea",
    lastName: "black"
  },

  {
    firstName: "alyssa",
    lastName: "black"
  },

  {
    firstName: "charmaine",
    lastName: "long"
  },

  {
    firstName: "emma",
    lastName: "johnson"
  },

  {
    firstName: "bill",
    lastName: "johnson"
  },

  {
    firstName: "elouise",
    lastName: "morgan"
  }
];

export default function App() {
  return (
    <div className="App">
      <Name list={PEOPLE} />
    </div>
  );
}



**Name.jsx**

export const Name = (props) => {
  const { list } = props;
   
  return (
    <header>
      {list.map((item) => (
        <div className="peoplelist">
          <>
            {item.firstName} : {item.lastName}
          </>
        </div>
      ))}
    </header>
  );
};

export default Name;

Answer 1

list
  .filter(({lastName}) => lastName === 'long')
  .map(item => <>{item.lastName}</>)

将仅输出具有 long 姓氏的项目。 .map 方法 returns 与源数组长度相同的数组。

ReactJS if语句或jsx文件中的条件

ReactJS if statement or conditionals inside jsx file

mapping

if-statement

jsx

conditional-statements

reactjs