react父组件传值给子组件

父组件传递给子组件数据和方法

import React, { Component } from "react";
import List from "./list";
class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["vue", "react"],
      inputVal: ""
    };
  }
  handleChange(e) {
    this.setState({
      inputVal: e.target.value
    });
  }
  addList() {
    this.setState(
      {
        list: [...this.state.list, this.state.inputVal]
      },
      () => {
        this.setState({
          inputVal: ""
        });
      }
    );
  }
  delete(idx) {
    console.log(idx);
    let list = this.state.list;
    list.splice(idx, 1);
    this.setState({
      list
    });
  }
  render() {
    return (
      <div>
        <div>
          <input
            value={this.state.inputVal}
            onChange={this.handleChange.bind(this)}
          />
          <button onClick={this.addList.bind(this)}>增加</button>
        </div>
        <List list={this.state.list} deleteItme={this.delete.bind(this)}></List>
      </div>
    );
  }
}

export default Todo;

以上代码list是todo的一个子组件，父组件需要向子组件传递数据和删除数据的方法

list代码如下：

import React, { Component } from "react";
class List extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  handleClick(idx) {
    console.log(this.props.deleteItme);
    this.props.deleteItme(idx);
  }
  render() {
    return (
      <div>
        <ul>
          {this.props.list.map((item, index) => {
            return (
              <li key={item + index}>
                {item}

                <button onClick={() => this.handleClick(index)}>删除</button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default List;

子组件通过this.props接收父组件传递的数据或者方法