关于react 子组件父组件之间的传值

父组件给子组件传值

写在前面：这里用到的PageinationItem组件是ant-design提供的。当然你也可以自定义组件。

• 父组件引用子组件

需要添加待传递的变量名称和变量数据

<PageinationItem defaultCurrent={1} defaultPageSize={defaultPageSize}
                 current={this.state.current} total={total} pages={pages}
                />

• 在子组件用props接收父组件传来的值

方法：通过construcror(props)的super(props)接收
用这个方法可以将props里的数据转换成可以直接使用的数据const { defaultCurrent, current, total, defaultPageSize } = this.props;（当然，写this.props.total也是可以的）

 constructor(props) {
    super(props);
    this.state = {
    };
  }

 render() {
    const { defaultCurrent, current, total, defaultPageSize } = this.props;
    return (
      <div>
        <Pagination
          defaultCurrent={defaultCurrent}
          current={current}
          total={total}
          pageSize={defaultPageSize}
        />
      </div>
    );
  }

子组件给父组件传值

通过函数返回值，在父组件设置接收函数，并在父组件内对值进行操作。

• 父组件设置接收函数和处理函数

<PageinationItem getPageResultArray={this.getPageResultArray} />

• 子组件给父组件传值的函数

//给父组件的getPageResultArray返回参数key
<Pagination onChange={key => this.props.getPageResultArray({ key })}/>


//接收值（key）进行函数处理
  getPageResultArray = result => {
    result = result.key;//测试发现接收的是key:2这样形式的值，所以进行了格式调整
    this.setState(//改善异步setState的缺陷，使状态设置完毕后再进行下面的函数处理
      () => {
        return { current: result };
      },
      () => {//这里是一些分页操作，下一篇博客会着重讲怎么分页
        const { current, defaultPageSize } = this.state;
        reqPageItems(current, defaultPageSize)
          .then(response => {
            if (response.isSuccess) {
              /**存储分页信息于state */
              this.setState({
                pageItem: response.data.experimentsData.records
              });
              this.setState({ total: response.data.experimentsData.total });
              this.setState({ pages: response.data.experimentsData.pages });
            } else {
              message.error(response.message);
            }
          })
          .catch(error => {
            console.log("failed", error);
            message.error(error.message);
          });
      }
    );
  };