React函数组件如何正确传递与接收props参数

你的需求完全可以实现，当前代码存在3处入门阶段常见的语法/逻辑错误，修正后即可正常运行。

现存问题说明 #

• 函数组件参数接收逻辑错误：React函数组件的第一个入参是所有传入属性组成的props对象，不是单个参数值。你写的const Navbar = (index) => {}中，index实际拿到的是整个props集合对象，直接渲染页面会显示[object Object]，拿不到传入的0值。
• JSX传值语法错误：JSX中如果要传递字符串以外类型的值（数字、布尔、数组、对象、变量、表达式），必须用大括号包裹值。你写的<Navbar index=0 />不符合JSX语法，会直接编译报错，数字类型参数需要写成index={0}。
• 组件定义语法错误：Home组件的箭头函数写法缺少赋值等号，const Home () => {}是非法语法，无法正常编译。

修正后可运行代码 #

Navbar 组件代码 #

import React from 'react';
// 推荐写法：直接解构props拿到需要的index参数
const Navbar = ({ index }) => {
  return(<div>{index}</div>)
}

// 不习惯解构的话也可以用下面的写法，效果完全一致
// const Navbar = (props) => {
//   return(<div>{props.index}</div>)
// }

export default Navbar;

Home 页面调用代码 #

import React from 'react';
import Navbar from '../../components/Navbar/Navbar.jsx';
// 补全箭头函数的赋值等号
const Home = () => {
  // 数字类型参数用大括号包裹传入
  return(<Navbar index={0} />)
}
export default Home;

补充使用提示 #

• 如果要传递字符串类型参数，可以直接写属性值，不需要大括号，例如<Navbar title="首页导航" />
• 多参数传递时直接在组件标签上追加属性即可，例如<Navbar index={0} theme="dark" />，组件内解构时写({ index, theme })就能拿到对应的值
• 大括号内支持写任意合法JS表达式，比如你可以传变量、计算结果、函数等

内容的提问来源于stack exchange，提问作者stephen telian