React入门 - 04(从编写一个简单的 TodoList 说起)

上一节我们已经对 React组件和 "JSX语法"有了大概的了解,这一节我们继续在 react-demo这个工程里编写代码。这一节我们来简单实现一个 TodoList来更加了解编写组件的一些细节。

1、在编辑器中打开 react-demo这个工程

2、打开 index.js文件,将组件 App改为 TodoList,挂载的地方同样进行此修改。

js 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client'; 
import reportWebVitals from './reportWebVitals';

import TodoList from './TodoList'; 


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>
);


reportWebVitals(); 

3、在src文件下新建 TodoList.js文件,内容编写如下

js 复制代码
import React, { Component } from "react";

class TodoList extends Component{
  render() {
    return (
      <div>
        todolist 内容
      </div>
    )
  }
}

export default TodoList

4、运行下工程,可以看到网页的内容如下

5、我们继续实现 TodoList功能:界面有一个输入框和一个提交按钮,在输入框里输入内容,点击"提交"按钮后,内容就会以列表的形式展示在界面 input框下面。

6、根据功能要求,我们继续编写 TodoList组件代码

js 复制代码
import React, { Component } from "react";

class TodoList extends Component{
  render() {
    return (
      <div>
        <input />
        <button> 提交 </button>
      </div>

      <ul>
        <li>React 入门-01</li>
        <li>React 入门-02</li>
        <li>React 入门-03</li>
      </ul>
    )
  }
}

export default TodoList

7、运行代码时报错如图。

8、为什么报错呢?答案:因为"JSX语法"要求我们在写 HTML标签时,最外层有且只能有一个 <div>标签来对所有标签进行包裹。所以将代码改正一下

js 复制代码
import React, { Component } from "react";

class TodoList extends Component{
  render() {
    return (
   // 外层有且只能有一个 div 标签对所有标签进行包裹!
      <div>
        <div>
          <input />
          <button> 提交 </button>
        </div>
        <ul>
          <li>React 入门-01</li>
          <li>React 入门-02</li>
          <li>React 入门-03</li>
        </ul>
      </div>
    )
  }
}

export default TodoList

9、关于"JSX"外层有且只能有一个 <div>包裹。细心的你们一定会发现这个 <div>会实实在在的显示在了 DOM 结构上,但有的时候我们并不希望有这个多余的节点出现,这个又怎么进行解决呢?

10、在 React 16版本里,React提供了一个名为 Fragment的占位符来解决这个问题。也就是说,我们可以从 react中引入这个 Fragment,然后使用 <Fragment>来 代替最外层的 <div>元素

js 复制代码
// 引入 Fragment
import React, { Component, Fragment } from "react";

class TodoList extends Component{
  render() {
    return (
   // 使用 Fragment 代替 div
      <Fragment>
        <div>
          <input />
          <button> 提交 </button>
        </div>
        <ul>
          <li>React 入门-01</li>
          <li>React 入门-02</li>
          <li>React 入门-03</li>
        </ul>
      </Fragment>
    )
  }
}

export default TodoList

11、再次观察 DOM 结构,就会发现顶级 <div>的问题就解决了

到此,本章的内容就结束了!

相关推荐
一枚前端小能手6 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖7 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号12 分钟前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组13 分钟前
React JSX 语法讲解
前端·react.js·前端框架
小高00718 分钟前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手20 分钟前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript
lssjzmn27 分钟前
性能飙升!Spring异步流式响应终极指南:ResponseBodyEmitter实战与架构思考
java·前端·架构
毕设源码-郭学长32 分钟前
【开题答辩全过程】以 基于vue在线考试系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
詩句☾⋆᭄南笙38 分钟前
初识Vue
前端·javascript·vue.js
Javian1 小时前
浅谈前端工程化理解
前端