如何遍歷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>