0
クラスを使用して複数の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：バー"。私は要素に "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"
}
このようなループで複数の反応するアプリケーションを作成する理由はありますか？ – spirift
@spirift - アプリケーションが混乱する可能性があります - 私は "MyElement"に変更しました。はい私はMyElementの倍数をレンダリングする必要があります。 – srvy