Question

我是React的新手，我发现很难将道具从一个组件传递到另一个组件。这是第一个组件

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      // show:true
    };
  }
  counter = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="">
        <div>{this.state.count}</div>

      </div>
    );
  }
}

这是第二个

export default class Button extends React.Component {
  render() {
    return (
      <div className="">
        <App />
        <button onClick={this.counter}>Click me</button>
      </div>
    );
  }
}

如何通过在应用程序组件中传递道具来使计数器计数

Answer 1

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      // show:true
    };
  }
  counter = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="">
        <div>{this.state.count}</div>
        <Button counter={this.counter} />
      </div>
    );
  }
}


export default class Button extends React.Component {
  render() {
    return (
      <div className="">
        <button onClick={this.props.counter}>Click me</button>
      </div>
    );
  }
}

如何在React中传递道具

1 个答案: