相关文章推荐
刚毅的长颈鹿  ·  Windows10 ...·  2 周前    · 
呐喊的包子  ·  Oops!!! - 简书·  1 年前    · 

假设现在我们有一个这样的数组: list: ['张三','李四','王五'] ,那么怎么在页面上渲染呢,很简单,在react中可以用数组的map方法

import React from 'react'
class TodoList extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            list: ['张三','李四','王五'],
    render() {
        return (
                    {/* 循环数据 */}
                        this.state.list.map((item,index) => {
                            // 传入index
                            return <li key={index}>{item}</li>
export default TodoList

上面的代码我们还能优化一下,项目当中,列表的数据都是从后台获取了,这里我们何不封装成一个方法进行渲染呢,也符合react函数式编程

import React from 'react'
class TodoList extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            list: ['张三','李四','王五'],
    getTodoList(){
        return (
            this.state.list.map((item,index) => {
                return <li key={index}>{item}</li>
    render() {
        return (
                    {/* 循环数据 */}
                    { this.getTodoList() }
                    //我们也可以直接这样渲染,不过不推荐
                    { this.state.list }

2、添加点击事件

想要获取我点击的li里面的数据怎么搞呢,现在就要给这个元素添加点击事件了,react中有自己的语法规范,添加点击事件是这样的:onClick={ this.xxxxx }

import React from 'react'
class TodoList extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            list: ['张三','李四','王五']
        //在这里对this指向进行赋值,就不用再定义方法中写bind(this)了,比较推荐,也可以在jsx中加入`bind(this)`,就能获取到this了
        this.btnClick = this.btnClick.bind(this)
    //点击事件
    btnClick(){
        //这里面的this其实指向的是button按钮,可以改变this的指向,在button的点击事件中:
	//箭头函数用法
	btnClick = () => {
		//do something
    render() {
        return (
            <div className="main-container">
                    {/* 循环数据 */}
                        this.state.list.map((item,index) => {
                            // 传入index
                            return <li key={index} onClick={this.btnClick(index)}>{item}</li>
                            //或者,这里bind的作用是修改this指向,让函数内部的this指向bind参数中的第一个参数
                            return <li key={index} onClick={this.btnClick.bind(this,index)}>{item}</li>
                            //更推荐使用箭头函数
                            return <li key={index} onClick={() => this.btnClick(index)}>{item}</li>
export default TodoList

js中bind、call、apply都能改变this指向,区别就是bind不会立即调用,而call、apply会立即调用前面的那个函数

bind的第一个参数用来修改this指向,后面所有的参数都会用来当作调用前面函数时候的参数传递进去

<input type="button" value="点我一下" onClick={this.clickMe.bind(this,'我的天','哈哈哈','你是谁')} />
clickMe(arg1,arg2){
        console.log(arg1,arg2)
                    1、循环假设现在我们有一个这样的数组:list: ['张三','李四','王五'],那么怎么在页面上渲染呢,很简单,在react中可以用数组的map方法import React from 'react'class TodoList extends React.Component {    constructor(props){        super(props)        this.state = {            list: ['张三','李四','王五'],    .
1. 列表循环数据化
目前Child.js组件的<li>标签内的数据是静态的,也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript代码循环页面上。
首先,在上一节。定义过了一个空的list数组。这节课先把list数组添加两个数组元素。代码如下:
	// 省略上面部分无关代码
	constructor(props) {
		super(props)
		this.state = {
			input.