react如何在子组件传递数据到父组件展示？

Question

react如何在子组件传递数据到父组件展示？不是单纯的展示数据，有没有办法传递过去？

父

import React, { Component } from 'react';
import Children from './Children';
class Father extends Component {
  childs = (txt) => {
    console.log(txt)
  }
  render() {
    return (
      <div className="box">
        <Children name="我是父级传递过来的" child={this.childs()}></Children>
      </div>
        );
  }
}


export default Father;

子

import React, { Component } from 'react';
class Children extends Component{
    render(){
        let str = "我是子组件内的内容";
        return (
            <div className="child">
                {str}
               {this.props.name}
            </div>
        )
    }
}
export default Children;

Answer 1

子组件向父组件传参使用事件回调的方式。这个基础，建议多看看文档！

import React, { Component } from 'react';
import Children from './Children';
class Father extends Component {
  childs = (txt) => {
    console.log(txt)
  }
  render() {
    return (
      <div className="box">
        <Children name="我是父级传递过来的" childs={this.childs} fun={this.fun}></Children>
      </div>
        );
  }
}

export default Father;

import React, { Component } from 'react';
class Children extends Component{
    giveFather=()=>{
        const value='你想要传的值'
        this.props.childs(value)
    }
    render(){
        let str = "我是子组件内的内容";
        return (
            <div className="child">
                {str}
               {this.props.name}
               <button onClick={this.props.giveFather}>button</button>
            </div>
        )
    }
}
export default Children;