循环中的反应渲染在第一个元素之后停止答案

【问题标题】：React rendering in a loop stops after first element循环中的反应渲染在第一个元素之后停止
【发布时间】：2017-03-21 16:11:30
【问题描述】：

我正在使用该类渲染多个 div，但我只看到渲染的第一个 div。

<html> 
<body> 
  <div class="elem" name="foo"/>
  <div class="elem" name="bar"/>
  <script src="public/bundle.js" type="text/javascript"></script>
</body> 
</html>

JSX：

import React from 'react';
import {render} from 'react-dom';

class MyElement extends React.Component {
    render () {
        return <div>NAME: {this.props.name}</div>
    }
}

var divs = document.getElementsByClassName('elem');
Array.prototype.forEach.call(divs, function(div, index) {
    render(<MyElement name={div.getAttribute('name')}/>, div);
});

我只看到“NAME: foo”但没有看到“NAME: bar”。我什至尝试将“key={index}”添加到元素但没有用。

以下是使用的依赖项：

"dependencies": {
  "babel-core": "^6.23.1",
  "babel-loader": "^6.4.0",
  "babel-preset-es2015": "^6.22.0",
  "babel-preset-react": "^6.23.0",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "webpack": "^2.2.1"
}

【问题讨论】：

有理由在这样的循环中创建多个 React 应用程序吗？
@spirift -- 应用程序可能令人困惑- 我将其更改为“MyElement”。是的，我需要渲染多个 MyElement。

标签： javascript reactjs babeljs

【解决方案1】：

你的 div 应该用开始和结束标签来定义。

<div class="app" name="foo"></div>
<div class="app" name="bar"></div>

【讨论】：

不客气。请将此标记为正确答案。 :)