有没有更好的方法来传递道具给React中的组件？

<MyComponent prop1="value1" prop2={variable} />

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      prop1: "value1",
      prop2: this.props.variable
    };
  }

  render() {
    // 使用this.state.prop1和this.state.prop2来访问道具
    return (
      <div>
        {this.state.prop1}
        {this.state.prop2}
      </div>
    );
  }
}

// 创建上下文
const MyContext = React.createContext();

// 父组件提供道具
class ParentComponent extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{ prop1: "value1", prop2: variable }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

// 子组件使用道具
class ChildComponent extends React.Component {
  static contextType = MyContext;

  render() {
    const { prop1, prop2 } = this.context;
    return (
      <div>
        {prop1}
        {prop2}
      </div>
    );
  }
}

import React, { useState } from "react";

function MyComponent() {
  const [prop1, setProp1] = useState("value1");
  const [prop2, setProp2] = useState(variable);

  return (
    <div>
      {prop1}
      {prop2}
    </div>
  );
}