在循環中的反應渲染在第一個元素後停止

我使用該類渲染多個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); 
});

我只看到「姓名：富」，但沒有「姓名：酒吧」。我甚至嘗試添加「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" 
}

來源

2017-03-21 srvy

是否有理由在循環中創建多個反應應用程序？ – spirift

@spirift - 應用程序可能會令人困惑 - 我將其更改爲「MyElement」..是的，我需要呈現MyElement的倍數。 – srvy

你的div應該開始和結束標記定義。

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

來源

2017-03-21 16:20:52

感謝您指出這個愚蠢的錯誤！ – srvy

不客氣。請將此標記爲正確答案。 :) –

在循環中的反應渲染在第一個元素後停止

回答

相關問題