Maison > Article > interface Web > méthode de réaction pour ajouter des données au tableau
méthode de réaction pour ajouter des données au tableau
- 王林avant
- 2020-12-03 16:45:154420parcourir
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 :
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('xpf')
);
</script>
</body>
</html>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 :
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('xpf')
);
</script>
</body>
</html>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!