Question

我在Carousel.js下面有以下代码。

＆＃13;

import React from 'react';

export default class Carousel extends React.Component {
  render() {

    const estatesArray = [
      {name: "The Villa", url: "www.google.ca", type: "Villa"},
      {name: "The Apartment", url: "www.google.ca", type: "Apartment"}
    ];

    const listItems = estatesArray.map((obj) => {
      <li> {obj.name} + {obj.url} </li>
    });

    return (
        <ul>
          {listItems}
        </ul>
    );
  };
};

＆＃13;

它应该完美无缺。它与react.js文档中的map函数完全相同，只有很小的更改。我不明白为什么当我在我的Home组件上调用它时（如此：＆lt;＆＃34; Carousel /＆gt ;,没有引号），它会显示一个空标记。任何见解？

Answer 1

const listItems = estatesArray.map((obj) => {
    <li> {obj.name} + {obj.url} </li>
});

映射回调没有返回

你想要

const listItems = estatesArray.map((obj) => {
  return <li> {obj.name} + {obj.url} </li>
});

或

const listItems = estatesArray.map((obj) => (
  <li> {obj.name} + {obj.url} </li>
));

任何不要忘记在key上添加li道具。

为什么以下组件不呈现？

1 个答案: