React 04

1024程序员节日快乐！

1 react对于换行敏感吗?

//改错
export default function Profile() {
  return
    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

在 React 中，JSX 语法对换行是敏感的，你的这段代码会因为换行问题导致语法错误。

具体原因：

JSX 本质上是 JavaScript 的语法扩展，需要遵循 JavaScript 的自动分号插入（ASI）规则。当 return 语句后直接换行时，JavaScript 会自动在 return 后插入分号，导致后续的 JSX 代码被视为独立的、未被执行的代码块，从而报错。

你的代码实际会被解析为：

export default function Profile() {
  return; // 自动插入分号，函数提前返回
  // 下面的 JSX 代码不会被执行，且处于函数体外，导致语法错误
  <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

解决方案：

让 JSX 代码与 return 在同一行，或用括号包裹换行的 JSX：

1. 同一行写法：

export default function Profile() {
  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

1. 括号包裹换行写法（推荐，更易读）：

export default function Profile() {
  return (
    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />
  );
}

总结：

React/JSX 中，return 后的 JSX 若换行，必须用括号 () 包裹，否则会因自动分号插入导致语法错误。这是开发中常见的 “坑”，需要特别注意换行格式。

2 尝试写第一个组件

实现

// 在下面写你的组件

function P (){
  return(<h1>hi</h1>);
}
export default function App(){
  return(
    <div>
     <h2>hey</h2>
  <P />
    </div>
 );
}

错误百出

// 在下面写你的组件

function P (){
  return(<h1>hi</h1>);
}
export default fuction P(){
  <h2>hey</h2>
  <P/>
}

你的代码里存在一些语法错误和逻辑问题，我们一步步来修正并理解如何正确编写 React 组件：

一、先看正确的组件写法（修复你的代码）

// 定义一个 P 组件（小功能组件）
function P() {
  return <h1>hi</h1>; // 返回 JSX 元素
}

// 定义默认导出的主组件（比如叫 App）
export default function App() {
  // 组件内部可以使用其他组件（如 P 组件）
  return (
    <div>
      <h2>hey</h2>
      <P /> {/* 使用 P 组件 */}
    </div>
  );
}

二、关键错误解析

1. export default 语法错误你写的 export default fuction 是拼写错误，正确是 function。

2. 组件必须有唯一根元素一个组件的 return 后面如果有多个 JSX 元素（比如 <h2> 和 <P/>），必须用一个根元素包裹（通常用 <div> 或 <> 空标签），否则会报错。

3. 避免组件重名你同时定义了两个 P 组件（一个普通定义，一个默认导出），会导致冲突。通常一个文件里默认导出一个主组件，其他组件作为辅助。

三、组件的核心规则（新手必记）

1. 组件是一个函数函数名首字母大写（比如 P、App），这是 React 识别组件的约定。

2. 必须返回 JSX函数内部通过 return 输出 JSX 结构（可以是单个标签，或多个标签被根元素包裹）。

3. 组件可以嵌套使用像上面的 App 组件里可以直接写 <P /> 来使用 P 组件，实现功能组合。

四、再写一个完整示例（更清晰）

// 1. 定义一个按钮组件
function MyButton() {
  return <button>点击我</button>;
}

// 2. 定义主组件（默认导出）
export default function Home() {
  return (
    <div>
      <h1>我的第一个组件页面</h1>
      <p>这是一段文字</p>
      <MyButton /> {/* 使用按钮组件 */}
    </div>
  );
}

把这段代码放到你的 src/App.jsx 里（替换原来的内容），浏览器会自动显示：

• 一个大标题
• 一段文字
• 一个按钮

这样就实现了组件的定义和嵌套使用～ 核心就是：函数返回 JSX，组件可以互相调用。

3 默认导出和具名导出

export - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export

【组件的导入和导出应该就是一个js文件里面定义了一个函数，在当前代码块是可以用的，但是如果别的文件也要用这个js文件内部的函数，就要import导入文件或者文件的函数？】

在 JavaScript（尤其是模块化开发中），一个 JS 文件可以看作一个模块。如果一个模块（JS 文件）里定义了函数，仅在自身文件内可直接使用；若其他文件想要使用这个函数，就需要通过 ** 导出（export）和导入（import）** 机制来实现跨文件的模块依赖。

结合你提供的表格，可以更清晰地理解两种导出 / 导入方式：

• 默认导出 / 导入：一个模块只能有一个默认导出，导入时可以自定义名称。例如模块导出 export default function Button() {}，其他文件可通过 import 自定义名称 from '模块路径' 导入（如 import MyButton from './Button.js'）。
• 具名导出 / 导入：一个模块可以有多个具名导出，导入时必须使用和导出时一致的名称，且需用大括号包裹。例如模块导出 export function Button() {}，其他文件需通过 import { Button } from '模块路径' 导入。

4 JSX

但JSX和React是相互独立的东西

介绍新的 JSX 转换 – React 博客