react 函数组件 Index.handel

在 React 中，通常使用函数组件来定义 UI 组件。一个基本的 React 函数组件通常会接收一些属性（props），并返回一个用于渲染 UI 的 React 元素。

下面是一个示例的 React 函数组件，用于渲染一个简单的页面：

import React from 'react';

function Index(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

export default Index;

这个组件接收两个属性 `title` 和 `content`，并返回一个包含这两个属性值的 React 元素。在这个例子中，元素被定义为一个包含标题和内容的 `<div>` 元素。

要使用这个组件，可以在其他组件中导入它，并使用它的名称来引用它。例如，在另一个组件中，可以这样使用 `Index` 组件：

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

function App() {
  return (
    <div>
      <Index title="Welcome" content="Hello, world!" />
    </div>
  );
}

export default App;

在这个例子中，`App` 组件包含了一个 `Index` 组件，并传递了 `title` 和 `content` 属性。当 `Index` 组件被渲染时，它会使用这些属性值来动态生成 UI。