méthode de réaction pour ajouter des données au tableau-js tutoriel-php.cn

méthode de réaction pour ajouter des données au tableau

王林

Libérer： 2020-12-03 16:45:15

avant

4524 Les gens l'ont consulté

méthode de réaction pour ajouter des données au tableau

La méthode spécifique est la suivante :

(Tutoriel vidéo gratuit : Tutoriel vidéo React)

Rendez d'abord un rendu aléatoire numéro, de sorte qu'il change toutes les secondes, et l'effet est le suivant :

méthode de réaction pour ajouter des données au tableau

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
  <title>数组追加元素</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="xpf"></div>
<script type="text/babel">
class Xpf extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      random:Math.random()
    }
  }
  
  componentWillMount(){
    setInterval(() => {
      this.setState({
        random:Math.random()
      })
    }, 1000);
  }
 
  render() {
    let {random} = this.state;
      return (
        <div>
          <div>
            {random}
          </div> 
          
        </div>
      );
  }
} 
 
ReactDOM.render(
	<Xpf />,
	document.getElementById(&#39;xpf&#39;)
);
 
</script>
 
</body>
</html>

Copier après la connexion

Remarque : il y a deux façons de mettre à jour les composants : changements dans les accessoires ou l'état, et le changement d'état se fait généralement via la méthode setState(). Ce n'est que lorsque l'état ou les accessoires changent que la méthode de rendu peut être appelée à nouveau, c'est-à-dire que le composant est mis à jour

pour mettre le nombre aléatoire généré dans un tableau, l'effet est le suivant :

méthode de réaction pour ajouter des données au tableau

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
  <title>数组追加元素</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="xpf"></div>
<script type="text/babel">
class Xpf extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      random:Math.random(),
      arr:[1,2,3]
    }
  }
  
  componentWillMount(){
    setInterval(() => {
      this.setState({
        random:Math.random(),
        arr:[...this.state.arr,Math.random()]
      })
    }, 1000);
  }
 
  render() {
    let {random,arr} = this.state;
      return (
        <div>
          <div>
            {random}
          </div> 
          <ul>
            {
              arr.map((item,index)=>{
                return ( <li key={index}>{item}</li>)
              })
            }
          </ul>  
        </div>
      );
  }
} 
 
ReactDOM.render(
	<Xpf />,
	document.getElementById(&#39;xpf&#39;)
);
 
</script>
 
</body>
</html>

Copier après la connexion

Utiliser.. .this.state.arr pour déconstruire arr, puis y ajouter le nombre aléatoire

Remarque : vous ne pouvez pas utiliser arr : this.state.arr.push(Math.random()). qui modifient le tableau d'origine, comme push Vous pouvez utiliser la méthode concat ou la syntaxe d'expansion de tableau ES6

Recommandations associées : Tutoriel js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!