React.js蓝图建议的Props接口

React.js蓝图建议的Props接口 是一个React组件期望接收到的props（属性）的类型定义。它用于指定组件将接受的props的类型和所需值。Props接口被定义为一个对象类型，具有一组键值对，其中键是prop的名称，值是prop的类型。它经常与React.FC类型结合使用，React.FC是一种泛型类型，表示React中的函数式组件。

Props接口有助于记录组件的期望props，并对props进行类型检查，以确保它们被正确使用。它还可以帮助在开发过程中捕获错误和防止类型错误。

语法： 在TypeScript中定义Props接口的语法如下：

interface Props {
    [key: string]: any;
}

创建React应用程序：

步骤1： 使用以下命令创建React应用程序：

npx create-react-app reactblueprint

步骤2： 在创建您的项目文件夹（即reactblueprint）后，使用以下命令进入：

cd reactblueprint

文件夹结构： 它将如下所示。

React.js蓝图建议的Props接口

示例1：

在第一个示例中，组件期望接收三个属性：名称的字符串，年龄的数字，以及favoriteColor的字符串。现在在App.js文件中写下以下代码。在这里，App是我们的默认组件，我们在里面写了我们的代码。

文件： MyComponent.js

import React from 'react'; 
  
interface Props { 
    name: string; 
    age: number; 
    favoriteColor: string; 
} 
  
const MyComponent: React.FC<Props> = (props) => { 
    return ( 
        <div> 
            <p>Name: {props.name}</p> 
            <p>Age: {props.age}</p> 
            <p> 
                Favorite Color:  
                {props.favoriteColor} 
            </p> 
        </div> 
    ); 
} 
  
export default MyComponent;

运行应用程序的步骤： 在项目的根目录下使用以下命令运行应用程序：

npm start

这是您如何在另一个文件中使用此组件的方法：在这个文件中，App组件导入MyComponent并以name设置为“Alice”，age设置为“20”，favorite color设置为“blue”进行渲染。

文件： App.js

<MyComponent name="Alice" 
    age={25} favoriteColor="blue" />

输出：

React.js蓝图建议的Props接口

示例2： 在第二个示例中，一个名为MyComponent的功能组件有一个名为message的单个prop，它的类型是字符串，并且在MyComponentProps接口中定义。在组件内部，它将message prop包装在

标签中进行渲染。

文件： MyComponent.js

import React from 'react'; 
  
interface MyComponentProps { 
    message: string; 
} 
  
const MyComponent: React.FC<MyComponentProps> =  
({ message }) => { 
    return <p>{message}</p>; 
}; 
  
export default MyComponent;

这是你如何在另一个文件中使用这个组件的方法：在这个文件中，App组件导入了MyComponent并使用属性message设置为“Hello, World!”进行渲染。因此最终输出将在屏幕上显示“Hello, World!”。

文件： App.js

import React from 'react'; 
import MyComponent from './MyComponent'; 
  
function App() { 
    return ( 
        <div> 
            <MyComponent message="Hello, World!" /> 
        </div> 
    ); 
} 
  
export default App;

输出：

React.js蓝图建议的Props接口