React基础代码

基础结构

import React,{Component,Fragment} from 'react'  // 导入各种依赖及组件

class Demo extends Component{
    render(){
        return (// jsx代码---js代码与html代码
           <Fragment>
				<h1>123</h1>
			</Fragment>
        );
    }
}

export default Demo	//导出Demo组件

state数据的操作

import React, { Component,Fragment } from 'react';
import logo from './logo.svg';
import './App.css'

// 组件App继承自Component
class App extends Component {
  constructor(props){
    super(props);
    // 这里是state数据
    this.state={
      inputValue : 'demo',
      list : []
    }
  }
  render() {
    return (
      <Fragment>
        {/**注释写法，该注释只在编码时可以看到 */}
        {/**bind(this)，改变this指向 */}
        {/**使用className代替class的原因是class与react的class类创建名重复说以在react中使用className代替class */}
        <input value={this.state.inputValue} onChange={this.thisChange.bind(this)} className='input'></input>
        <button onClick={this.inputButton.bind(this)}>提交</button>
        <ul>
          {/** 改变this指向并传入一个index值 */}
          {
            this.state.list.map((item,index)=>{
              return (
                <li key={index} onClick={this.deleteli.bind(this,index)}>
                  {item}
                </li>
              )
            })
          }
        </ul>
      </Fragment>
    );
  }
  thisChange(e){
    this.setState({
      inputValue : e.target.value
    });
  }
  inputButton(){
    this.setState({
      list : [...this.state.list,this.state.inputValue],
      inputValue : ''
    });
  }
  deleteli(index){
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list : list
    });
  }
}

export default App; //导出组件App

在react中书写javascript代码需要使用“{}”进行包裹，React遵循es6

React中的父组件调用子组件及传值

父组件

import React,{Component,Fragment} from 'react'
import './App.css'
import Items from './Items' 	//导入Items组件

class Demo extends Component{
    constructor(props){
        super(props);
        this.state={
            inputValue : '',
            list : []
        };
    }
    render(){
        return (
            // 当一个组件的state或props发生改变的时候，render函数就会重新执行
            /**页面随着数据的更新而更新 */
            /**每当state中的数据发生改变时，render都和重新的执行一次 */
            /**测试代码，在console打印render */
            <Fragment>
                {console.log("render")}
                <input value={this.state.inputValue} onChange={this.inputChnage.bind(this)}></input>
                <button onClick={this.inputValue.bind(this)}>提交</button>
                <ul>
                    {
                        this.state.list.map((items,index)=>{
                            return (
                                <li onClick={this.delValue.bind(this,index)}>
                                    {/**使用子组件 */}
                                    <Fragment>
                                        {/**con、index、del用于传值给子组件 */}
                                        <Items con={items} 
                                            index={index} 
                                            {/**在传递函数给子组件调用时，需要把组件Items的this指向改为本页面的this */}
                                            del={this.delValue.bind(this)}>
                                        </Items>
                                    </Fragment>
                                </li>
                            );
                        })
                    }
                </ul>
                {/**使用test子组件 */}
                <Test test={this.state.inputValue}></Test>
            </Fragment>
        );
    }
    inputChnage(e){
        const value = e.target.value;
        this.setState(()=>({
            inputValue : value
        }));
    }
    inputValue(){
        this.setState({
            list : [...this.state.list,this.state.inputValue],
            inputValue : ''
        });
    }
    delValue(index){
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list : list
        });
    }

}

export default Demo

子组件

import React,{Component,Fragment} from 'react'
import propTypes from 'prop-types'

class Items extends Component{
	// this.props.属性名-----可用于获取由父组件传递来的属性值
    constructor(props){
        super(props);
        this.deleteValue = this.deleteValue.bind(this)	//把this指向改为指向本函数的this指向，所以在deletevalue中才能用this调用props
    }
    render(){
        const { con } = this.props;
        return (
            <Fragment>
                {/**props用于获取属性，con是从demo,js传过来的属性 */}
                <li onClick={this.deleteValue}>{con}</li>
            </Fragment>
        );
    }
    deleteValue(){
        const {index} = this.props;
        const {del} = this.props;
    }
}
export default Items