不适用于 React 的 JSX 条件

Question

我刚开始使用 React，我遇到了一个问题：当我运行这段代码时，没有任何显示。

const plantList = {
    name: 'monstera',
    category: 'classique',
    id: '1ed',
    isBestSale: true
};

function Notes(){
    plantList.map((plant) => (
    <li key={ plant.id }>
        {plant.isBestSale ? <span></span> : <span></span>}
    </li>
))}

export default Notes

提前致谢

Answer 1

plantList是一个对象，如果你想把多个植物放在里面，并且有映射的能力，你可能想把它放在一个数组中。

const plantList = [{
  name: 'monstera',
  category: 'classique',
  id: '1ed',
  isBestSale: true
}];

您没有从函数组件返回值。

function Notes(){
return (
    <>
      {plantList.map((p) => (p.isBestSale ? <span></span> : <span></span>))}
    </>
  );
}

Answer 2

播放列表是一个对象。但是这个对象在js中是不可迭代的。如果你想迭代你需要使它成为一个数组看起来像

const plantList = [{
     name: 'monstera',
     category: 'classique',
     id: '1ed',
     isBestSale: true
 }];

您需要 return class/functional 组件中的任何内容来显示

function Notes(){
     return (
     <>
       {plantList.map((p) => (p.isBestSale ? <span></span> : <span> 
    </span>))}
   </>
)}

导出默认笔记

不适用于 React 的 JSX 条件

JSX condition that does not work with React

javascript

dictionary

function

reactjs