我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。


当前回答

如果选择在render方法的return()内部转换此值,最简单的方法就是使用map()方法。使用Map()函数将数组映射到JSX语法,如下所示(使用ES6语法)。


在父组件内部:

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>

请注意,key属性已添加到子组件中。如果没有提供密钥属性,您可以在控制台上看到以下警告。

警告:数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。

注意:人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式,您可以在这里阅读有关它的更多信息。简而言之,如果它不是一个静态列表,就不要使用索引作为键。


现在,在ObjectRow组件中,可以从对象的财产访问该对象。

在ObjectRow组件内部

const { object } = this.props

Or

const object = this.props.object

这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在,您可以根据您的目的吐出该对象中的值。


参考文献:

JavaScript中的map()方法

ECMAScript 6或ES6

其他回答

也许是当今最大开发者的标准,使用这样的结构:

 let data = [
  {
    id: 1,
    name: "name1"
  },
  {
    id: 2,
    name: "name2"
  },
  {
    id: 3,
    name: "name3"
  },
  {
    id: 100,
    name: "another name"
  }
];

export const Row = data => {
  return (
    <tr key={data.id}>
      <td>{data.id}</td>
      <td>{data.name}</td>
    </tr>
  );
};

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>{data.map(item => Row(item))}</tbody>
    </table>
  );
}

在JSX中,在HTML或任何代码中编写JavaScript操作,{data.map(item=>Row(item))},在map函数中使用单花括号。了解更多地图信息。

这里还可以看到以下输出。

您需要向数组中添加元素并渲染元素数组。这有助于减少重新渲染组件所需的时间。

下面是一些可能有用的粗略代码:

MyClass extends Component {
    constructor() {
        super(props)
        this.state = { elements: [] }
    }
    render() {
        return (<tbody>{this.state.elements}<tbody>)
    }
    add() {
        /*
         * The line below is a cheap way of adding to an array in the state.
         * 1) Add <tr> to this.state.elements
         * 2) Trigger a lifecycle update.
         */
        this.setState({
            elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
        })
    }
}

在迭代数组和生成JSX元素方面有很多解决方案。所有这些都很好,但都直接在循环中使用了索引。我们建议使用数据中的唯一id作为键,但如果数组中的每个对象没有唯一id,我们将使用索引作为键,但是不建议直接使用索引作为密钥。

还有一件事,为什么我们选择.map,但为什么不选择foEach,因为.map返回一个新数组。现在有很多不同的方法。

下面使用.map的不同版本详细说明了如何使用唯一键以及如何使用.map循环JSX元素。

当从数据中返回单个JSX元素和唯一id作为密钥版本时,.map不返回:

const {objects} = this.state;

<tbody>
    {objects.map(object => <ObjectRow obj={object} key={object.id} />)}
</tbody>

将数据中的多个JSX元素和唯一id作为密钥版本返回时,不返回.map

const {objects} = this.state;

<tbody>
    {objects.map(object => (
        <div key={object.id}>
            <ObjectRow obj={object} />
        </div>
    ))}
</tbody>

当将单个JSX元素和索引作为键版本返回时,.map没有返回:

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => <ObjectRow obj={object} key={`Key${index}`} />)}
</tbody>

当返回多个JSX元素和索引作为密钥版本时,.map没有返回:

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => (
        <div key={`Key${index}`}>
            <ObjectRow obj={object} />
        </div>
    ))}
</tbody>

.map,当返回多个JSX元素和索引作为键版本时返回:

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => {
        return (
            <div key={`Key${index}`}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

将数据中的多个JSX元素和唯一id作为密钥版本返回时,使用return的.map:

const {objects} = this.state;

<tbody>
    {objects.map(object => {
        return (
            <div key={object.id}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

另一种方式是

render() {
  const {objects} = this.state;
  const objectItems = objects.map(object => {
       return (
           <div key={object.id}>
               <ObjectRow obj={object} />
           </div>
       )
  })
  return(
      <div>
          <tbody>
              {objectItems}
          </tbody>
      </div>
   )
}

想象一下,你只是在调用JavaScript函数。不能在函数调用的参数所在的位置使用for循环:

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

看看函数tbody是如何作为参数传递给for循环的——导致语法错误。

但您可以创建一个数组,然后将其作为参数传入:

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

使用JSX时,基本上可以使用相同的结构:

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

顺便说一下,我的JavaScript示例几乎与JSX的示例完全相同。玩Babel REPL,了解JSX的工作原理。

问题是您没有返回任何JSX元素。对于这种情况还有另一种解决方案,但我将提供最简单的解决方案:“使用map函数”!

<tbody>
  { numrows.map(item => <ObjectRow key={item.uniqueField} />) }
</tbody>

它是如此简单和美丽,不是吗?