React 18中如何在入口文件index.js中使用/获取props

React 18 里函数组件接收 props 的逻辑和之前版本完全一致，你之前的写法export default function main({props})其实是个误区——函数组件的第一个参数就是整个 props 对象，不需要额外解构{props}。

下面是具体的实现步骤：

1. 在组件中接收 props #

有两种常用写法：

• 直接接收完整的 props 对象：

// App.js
export default function App(props) {
  // 直接通过 props.xxx 访问属性
  return <div>传入的标题：{props.title}</div>;
}

• 解构 props 中的特定属性（更简洁）：

// App.js
export default function App({ title, desc }) {
  // 直接使用解构后的变量
  return (
    <div>
      <h1>{title}</h1>
      <p>{desc}</p>
    </div>
  );
}

2. 在根渲染时传递 props #

回到你提供的样板代码，只需要在<App />标签中添加属性即可传递 props：

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {/* 这里传递 props */}
    <App title="React 18 Props 示例" desc="这是传递给App组件的描述内容" />
  </React.StrictMode>
);

reportWebVitals();

补充说明 #

如果你之前写的{props}是想把整个 props 对象作为一个属性传递，那正确的写法应该是<App props={xxx} />，但这是自定义属性，不是 React 原生的 props 传递方式，通常不推荐这么做——直接传递具体属性更清晰。

内容的提问来源于stack exchange，提问作者Sumair Ahmed