React 组件返回对象：如何传递和接收参数

在 React 中，可以通过 return 语句从 render() 方法中返回一个对象。该对象描述了要渲染的组件的结构和属性。

以下是一个简单的例子，演示了如何在 React 中返回一个对象并接收参数：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const { name, age } = this.props;

    return (
      <div>
        <h1>Hello, ' + name + '!</h1>
        <p>You are ' + age + ' years old.</p>
      </div>
    );
  }
}

export default MyComponent;

在上面的例子中，我们定义了一个名为 MyComponent 的 React 组件。在 render() 方法中，我们从 this.props 中解构出 name 和 age 两个属性，并将它们用于返回的对象中。

要使用这个组件并传递参数，可以在父组件中像下面这样使用它：

import React from 'react';
import MyComponent from './MyComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <MyComponent name='Alice' age={25} />
        <MyComponent name='Bob' age={30} />
      </div>
    );
  }
}

export default App;

在上述示例中，我们使用 MyComponent 两次，并通过 name 和 age 属性传递不同的值。这些值将在 MyComponent 组件中被接收并用于渲染。