Question

我想使用setInterval来循环<li>个对象有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')
);

有人有什么想法吗？

Answer 1

这是一个有效的演示。基本上，您需要启动计时器并将当前显示列表项保持在状态。计时器将每隔500毫秒增加当前数字，并在超过项目数时回绕。

需要注意的一些事项：

使用this.setState的替代签名，因为setState不能保证同步，如果您在this.state内引用setState，则可能会过时。< / p>
请记住在卸载组件时清除计时器。

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

以您的简单示例为基础：

<head>
  <meta charset="utf-8">
  <title>
    example &mdash; example &amp; example
  </title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <style>
    body {
      font-family: 'Dosis';
    }
  </style>
</head>

<body>
  <div class="content" style="text-align: center; font-size:16px; text-transform: uppercase;">
    example.IO
    <br> USA
    <br><br> example &amp; example
    <br> coming soon 2018
    <br><br>
    <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
    <br><br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
    <br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
    <br>
    <br>
  </div>

如何在React中对子类循环className

3 个答案: