813_React官方文档_组件间通信props

MyButton组件

import React from 'react';

//以对象的形式接收App组件传递下来的count(状态)和handleClick事件处理函数，
export default function MyButton({ count, handleClick }) {
  console.log(count);
  return (
    <div>
      <button onClick={handleClick}>点我{count}次</button>
    </div>
  );
}

App组件

import React from 'react';
import { useState } from 'react';
import MyButton from './components/MyButton';

export default function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <>
      {/* 将函数handleClick和count传递给MyButton组件 */}
      <MyButton count={count} handleClick={handleClick} />
      <MyButton count={count} handleClick={handleClick} />
    </>
  );
}