react拆分组件于组件

Posted 2021-01-16 lolita-web

Todolist.js(这是父组件)

import React, { Component,Fragment } from ‘react‘;
import ‘./style.css‘;
import TodoItem from ‘./TodoItem‘;
class Todolist extends Component {
    constructor(props) { //最优先执行的函数
        super(props);
        this.state={
            inputValue:‘‘,
            list:[]
        }
    }
    render() {
        return ( 
            <Fragment>
                <div>
                    {/*这是一个todolist*/}
                    <label htmlFor=‘insertArea‘>输入内容</label>
                    <input 
                        id="insertArea"
                        className=‘input‘
                        value={this.state.inputValue}
                        onChange={this.handleinputChange.bind(this)}
                    />
                    <button onClick={this.handlebuttonClick.bind(this)}> 提交 </button> 
                </div> 
                <ul>
                    {
                        // 这是一个list
                    }
                    {
                        this.state.list.map((item,index)=>{
                            return(
                                    <TodoItem //这是子组件
                                        key={index}
                                        index={ index } 
                                        item={ item } 
                                        deleteItem={this.handleItemdelt.bind(this)}
                                    />
                                )
                        })
                    }
                </ul> 
            </Fragment>
        );
    }
    handleinputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handlebuttonClick(e){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:‘‘
        })
    }
    handleItemdelt(index){
        // immutable
        // state 不允许我们坐任何的改变
        const list=[...this.state.list];   // list的一个副本
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
}
export default Todolist;

TodoItem.js (子组件)

import React ,{ Component } from ‘react‘;
class TodoItem extends Component{
    render(){
        return (<li 
        onClick={this.handleclick.bind(this)}
        dangerouslySetInnerHTML={{__html:this.props.item}}
    >
    </li>)
    }
    handleclick(){
        this.props.deleteItem(this.props.index);
    }
}
export default TodoItem;

总结：

1. 如何创建组件的拆分？

　　一.首先创建一个TodoItem，然后按照react的组件写一个组件

2.父子组件的关系

　　Todolist是一个大的组件，TodoItem是里面小的组件，在react开发中，react是一个树形的结构

3.父组件向子组件传递方式

　　通过标签上的属性方式向子组件传递，它即可以传递数据，又可以传递方法

  index={ index }

  deleteItem={this.handleItemdelt.bind(this)}

4.子组件怎么接收传递过来的方式？

　　通过this.props.xxx的方式来接收，如：this.props.item

5.有的时候子组件要调用父组件的方法，去改变父组件的数据，要怎么改变？

　　直接通过this.props.方法调用，然后在父组件的this指向做一次绑定bind(this)

  子组件：this.props.deleteItem（）

　父组件：deleteItem={this.handleItemdelt.bind(this)}