如何遍歷reactjs組件中的所有元素？

Question

我有一個reactjs組件，它看起來是這樣的：

<div className="wrapper"> 
       <div className="box box1" ref="04"/> 
       <div className="box box1" ref="03"/> 
       <div className="box box1" ref="02"/> 
</div> 

在現實中有我剛剛上市的25周嵌套的div 3.問題是我怎麼能透過這些元素循環，這樣我可以改變className屬性爲所有他們？

Answer 1

你可以做類似如下：

const Example =() => { 
 
    const newArr = [...Array(25)]; 
 
    return (
 
     <div> 
 
     { 
 
      newArr.map((i, index) => { 
 
      return (
 
       <div key={index} className={`box${index}`}>{index}</div> 
 
      ) 
 
      }) 
 
     } 
 
     </div> 
 
); 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

使用JSX

<div className="wrapper"> 
    { 
     [...Array(25)].map((un, index) => (
      <div key={index} className={yourClassName} ref={yourRef} /> 
     ) 
    ) 
    } 
</div>