javascript - 如何在React中的 child 上循环className

我想使用一个setInterval循环哪个<li>对象具有一个“ showing”的className，例如simple 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')
);

有人有什么想法吗？

最佳答案

这是一个工作示例。基本上，您需要启动一个计时器并将当前的显示列表项保持在该状态。计时器将每500ms递增当前数字，并在超过项目数时回绕。

需要注意的一些事情：


使用this.setState的替代签名，因为不能保证setState是同步的，并且如果在this.state中引用setState，则它可能已过时。
切记在卸下组件时清除计时器。

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>

关于javascript - 如何在React中的 child 上循环className，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48088299/