无法在另一个函数中调用函数- React.JS

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

function AnotherComponent() {
  const name = "John";
  return MyComponent({ name }); // 调用函数组件
}

class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

class AnotherComponent extends React.Component {
  render() {
    const name = "John";
    const myComponent = new MyComponent({ name }); // 实例化类组件
    return myComponent.render(); // 调用类组件的render方法
  }
}

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

class ParentComponent extends React.Component {
  handleClick() {
    console.log("Button clicked!");
  }

  render() {
    return <ChildComponent onClick={this.handleClick} />;
  }
}