react功能實現-數組遍歷渲染

在react中如何將一個數組遍歷,並且逐個渲染在頁面上?

1.在jsx渲染中,如果這個變量是一個數組，則會展開這個數組的所有成員.

    var arr = [
      <h1>Hello world!</h1>,
      <h2>React is awesome</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );

example元素中將產生兩個div,一個里面有h1標簽和一個里面有h2標簽.

2.array.map().

<ul>
        { 
            arr.map(function(val){ 
                return <li>{val}</li>
            })

</ul>  

array.map()的參數為一個函數,這個函數是每個array中的元素應該執行的函數,參數為val.

其實這個方法也是依賴於第1個特性的,因為array.map()是有返回值的,返回值是一個新數組.所以最終相當於<ul>{newArray}</ul>

 

3.為什么不能用forEach()?

因為forEach()沒有返回值