一、狀態

什么是狀態

import React, { Component } from "react";export default class App extends Component {state = {mytext: "收藏",myShow: true,};render() {return (<div><h1>狀態學習調試</h1><buttononClick={() => {this.setState({// mytext: "取消收藏",myShow: !this.state.myShow,});if (this.state.myShow) {console.log("收藏的邏輯");} else {console.log("取消收藏的邏輯");}}}>{this.state.myShow ? "收藏" : "取消收藏"}</button></div>);} }

另一種寫法：構造函數—快捷鍵 rcs

export default class App extends Component {constructor(props) {super(props);this.state = {mytext: "收藏",myShow: true,myname: true,};}render() {

二、循環渲染

.map()映射

import React, { Component } from "react";export default class App extends Component {constructor(props) {super(props);this.state = {list: ["111", "222", "333"],};}render() {return (<div><ul>{this.state.list.map((item) => {return <li key={item}>{item}</li>;})}</ul></div>);} }

加Key的原因

為了列表的復用和重排

避免key值相同的改法：
更改接受的數據

import React, { Component } from "react";export default class App extends Component {constructor(props) {super(props);this.state = {// list: ["111", "222", "333"],list: [{id: 1,text: "1111",},{id: 2,text: "2222",},],};}render() {return (<div><ul>{this.state.list.map((item) => {return <li key={item.id}>{item.text}</li>;})}</ul></div>);} }

三級標題

四級標題

五級標題

六級標題

總結

以上是生活随笔為你收集整理的React基础（肆）———状态和循环渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。