如何在React中的孩子上循環className

Question

我想使用setInterval循環哪個<li>對象的className為“ showing”，就像這個簡單的slideshow一樣 。 我不知道如何在React-land中做到這一點。

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <ul>
      {
        numbers.map((number) =>
          <li key={number.toString()}>{number}</li>
        )
      }
    </ul>
  );
}


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

有人有什么想法嗎？

Answer 1

這是一個工作示例。 基本上，您需要啟動一個計時器並將當前的顯示列表項保持在該狀態。 計時器將每500ms遞增當前數字，並在超過項目數時回繞。

需要注意的一些事情：

1. 使用this.setState的替代簽名，因為不能保證setState是同步的，並且如果在setState引用this.state ，則它可能已過時。

2. 切記在卸下組件時清除計時器。

 class App extends React.Component { constructor(props) { super(props); this.numbers = [1, 2, 3, 4, 5]; this.state = { current: 0, }; } componentDidMount() { this.timerId = setInterval(() => { this.setState(state => ({ ...state, current: (state.current + 1) % this.numbers.length, })); }, 500); } componentWillUnmount() { clearInterval(this.timerId); } render() { return ( <div className="App"> <ul> {this.numbers.map((number, index) => ( <li key={number} className={index === this.state.current ? 'slide showing' : 'slide'} > {number} </li> ))} </ul> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); 

 .slide { font-size: 40px; padding: 40px; box-sizing: border-box; background: #333; color: #fff; display: none; width: 100%; height: 40px; } .slide.showing { display: inherit; } .slide:nth-of-type(1){ background: red; } .slide:nth-of-type(2){ background: orange; } .slide:nth-of-type(3){ background: green; } .slide:nth-of-type(4){ background: blue; } .slide:nth-of-type(5){ background: purple; } 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"><div> 

Answer 2

您可能需要使用componentDidMount函數才能使用setInterval函數，以便可以訪問這些類。 也可以使用ref來獲取元素本身的所有權。

https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs

在componentDidMount可以訪問該元素，然后您應該可以使用任何JS東西。

演示： https : //codesandbox.io/s/oopj96pv65

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

class App extends React.Component {
  componentDidMount() {
    var slides = this.elem.children;
    var currentSlide = 0;

    setInterval(() => {
      slides[currentSlide].classList.remove("showing");
      currentSlide = (currentSlide + 1) % slides.length;
      slides[currentSlide].classList.add("showing");
    }, 2000);
  }

  render() {
    return (
      <ul
        id="slides"
        ref={elem => {
          this.elem = elem;
        }}
      >
        <li className="slide showing">Slide 1</li>
        <li className="slide">Slide 2</li>
        <li className="slide">Slide 3</li>
        <li className="slide">Slide 4</li>
        <li className="slide">Slide 5</li>
      </ul>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 3

以您的簡單示例為基礎：

// Store the state outside of the components
const numbers = [1, 2, 3, 4, 5];
let activeNumber = 0;

// A stateless NumberList component takes the numbers and activeNumber props
function NumberList(props) {
    // The `active` class is conditionally added to the appropriate `li`
    return (
        <ul>
            {
                props.numbers.map((number) =>
                    <li key={number} className={props.activeNumber === number ? 'active' : ''}>
                        {number}
                    </li>
                )
            }
        </ul>
    );
}

// Render method takes in the active number
function render(activeNumber) {
    ReactDOM.render(
        <NumberList numbers={numbers} activeNumber={activeNumber} />,
        document.getElementById('root')
    );
}

// We set an interval timer to update activeNumber and re-render
setInterval(function() {
    if (activeNumber < numbers.length) {
        activeNumber++
    } else {
        activeNumber = 1;
    }
    render(activeNumber);
}, 1000);

render(); // Initial render