js prop属性

// 函数式组件
function MyComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

// 类组件
class MyComponent extends React.Component {
  render() {
    const { name, age } = this.props;
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

function ParentComponent() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

// 使用Context API
const MyContext = React.createContext();

function ParentComponent() {
  const value = { name: 'Alice' };
  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = React.useContext(MyContext);
  return <div>{value.name}</div>;
}