react父子传值

import React, { Component } from 'react';


// 子组件
class ChildCpn extends Component {
  // 如果只是下面的形式，可以省略
  // constructor(props) {
  //   super(props);
  // }

  render() {
    const { name, age, height } = this.props;
    return (
      <h2>子组件展示数据: {name + " " + age + " " + height}</h2>
    )
  }
}

// 父组件
export default class App extends Component {
  render() {
    return (
      <div>
        <ChildCpn name="hss" age="21" height="1.7" />
        <ChildCpn name="kobe" age="40" height="1.98" />
      </div>
    )
  }
}

import React, { Component } from 'react';

// 子组件
function ChildCpn(props) {
  const { name, age, height } = props;

  return (
    <h2>{name + age + height}</h2>
  )
}

// 父组件
export default class App extends Component {
  render() {
    return (
      <div>
        <ChildCpn name="hss" age="21" height="1.7" />
        <ChildCpn name="kobe" age="40" height="1.98" />
      </div>
    )
  }
}

import React, { Component } from 'react';

// 子组件
class CounterButton extends Component {
  render() {
    const { onClick } = this.props;
    return <button onClick={onClick}>+1</button>
  }
}

// 父组件
export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+</button>
        <CounterButton onClick={e => this.increment()} name="why" />
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}