关于react.js:初探React

1、创立react我的项目

npx create-react-app my-app(npx是 npm 5.2+ 附带的 package 运行工具)
index.js为入口文件

2、启动我的项目

npm start

3、jsx语法

能够利用{}写js表达式，如：{1 + 2}
不能写js语法if等，

4、函数this

函数要通过上面bind(this)绑定TodoList组件
this.handleBtnClick = this.handleBtnClick.bind(this)

5、父子组件传值

父组件通过属性传值；如：content={item} index={index}
react根部只能有一个元素包裹，Fragment为react的片段，在页面中不显示；能够用于根部有两个或者多个元素

import React from "react";
import TodoItem from "./TodoItem";
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: "",
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDlete = this.handleDlete.bind(this);
  }
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: "",
    });
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }
  handleDlete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list,
    });
  }
  getTodoItems() {
    return this.state.list.map((item, index) => {
      return (
        <TodoItem
          content={item}
          key={index}
          index={index}
          delete={this.handleDlete}
        ></TodoItem>
      );
    });
  }
  render() {
    return (
      <React.Fragment>
        <div>
          <input
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          ></input>
          <button className="red-btn" style={{borderRadius:'2px',padding:'5px 10px'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </React.Fragment>
    );
  }
}

export default TodoList;

子组件通过props接管；如const { index } = this.props;

import React from "react";

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
  }
  handleDelete() {
    this.props.delete(this.props.index);
    // const { delete , index } = this.props;
    // delete index;
  }
  render() {
    const { content } = this.props;
    return <div onClick={this.handleDelete}>{content}</div>;
  }
}

export default TodoItem;