react拆分组件于组件

Posted lolita-web

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react拆分组件于组件相关的知识,希望对你有一定的参考价值。

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)}

以上是关于react拆分组件于组件的主要内容,如果未能解决你的问题,请参考以下文章

react拆分组件于组件

极智开发 | 讲解 React 组件三大属性之一:state

极智开发 | 讲解 React 组件三大属性之三:refs

极智开发 | 讲解 React 组件三大属性之二:props

组件&Props

React 顶层 API