Question

我有这个返回组件的代码：

const Test = ({places}) => (
  <div>
    {places.map(place => (
      <div className="location" key={place.slug}>
        <div className="photo" style={ { backgroundImage: "url(" + place.src + ")" } }></div>
        <h2>{place.name}</h2>
      </div>
    ))}
  </div>
);

但我对(和{括号感到困惑。我实际上是想摆脱外部的<div>标签，但是当我使用它时它似乎不起作用：

const Test = ({places}) => (
  {places.map(place => (
    <div className="location" key={place.slug}>
      <div className="photo" style={ { backgroundImage: "url(" + place.src + ")" } }></div>
      <h2>{place.name}</h2>
    </div>
  ))}
);

Answer 1

您需要使用div，原因您正在使用map动态创建元素，map将返回数组< / strong>并且我们不能返回多个元素，因此您需要将它们包装在div中。

React组件不能返回多个元素，但单个JSX表达式可以有多个子元素，因此如果您希望组件呈现多个元素，可以将它包装在div中。 / p>
不要忘记它是一个功能组件，函数总是包含许多参数，并且总是只返回一个值。

<强>更新

如果您想进行一些计算或想在Functional组件中定义变量，那么以这种方式编写组件：

const Test = ({places}) => { //use { let a = 1, b = [1,2,3,4]; b.forEach(el => console.log(el)); return( //use return to return the html elements <div> hello world!!! //other elements ...... </div> ) };

在React中使用map来创建组件

1 个答案: