javascript - 如何遍历我的 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>