Question

我正在使用该类渲染多个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);
});

我只看到＆＃34; NAME：foo＆＃34;但没有＆＃34; NAME：bar＆＃34;。我甚至尝试添加＆＃34; key = {index}＆＃34;元素，但没有用。

以下是使用的依赖项：

"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"
}

Answer 1

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

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

循环中的React渲染在第一个元素之后停止

1 个答案: