wordpress综合类网站,国家示范院校建设网站,建筑英才网招聘,外贸网站建设公司价格继上一节我们已经对 React组件和 ”JSX语法“有了大概的了解#xff0c;这一节我们继续在 react-demo这个工程里编写代码。这一节我们来简单实现一个 TodoList来更加了解编写组件的一些细节。 1、在编辑器中打开 react-demo这个工程
2、打开 index.js文件#xff0c;将组件 … 继上一节我们已经对 React组件和 ”JSX语法“有了大概的了解这一节我们继续在 react-demo这个工程里编写代码。这一节我们来简单实现一个 TodoList来更加了解编写组件的一些细节。 1、在编辑器中打开 react-demo这个工程
2、打开 index.js文件将组件 App改为 TodoList,挂载的地方同样进行此修改。
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.StrictModeTodoList //React.StrictMode
);reportWebVitals(); 3、在src文件下新建 TodoList.js文件内容编写如下
import React, { Component } from react;class TodoList extends Component{render() {return (divtodolist 内容/div)}
}export default TodoList4、运行下工程可以看到网页的内容如下
5、我们继续实现 TodoList功能界面有一个输入框和一个提交按钮在输入框里输入内容点击”提交“按钮后内容就会以列表的形式展示在界面 input框下面。
6、根据功能要求我们继续编写 TodoList组件代码
import React, { Component } from react;class TodoList extends Component{render() {return (divinput /button 提交 /button/divulliReact 入门-01/liliReact 入门-02/liliReact 入门-03/li/ul)}
}export default TodoList7、运行代码时报错如图。
8、为什么报错呢答案因为”JSX语法“要求我们在写 HTML标签时最外层有且只能有一个 div标签来对所有标签进行包裹。所以将代码改正一下
import React, { Component } from react;class TodoList extends Component{render() {return (// 外层有且只能有一个 div 标签对所有标签进行包裹divdivinput /button 提交 /button/divulliReact 入门-01/liliReact 入门-02/liliReact 入门-03/li/ul/div)}
}export default TodoList9、关于”JSX“外层有且只能有一个 div包裹。细心的你们一定会发现这个 div会实实在在的显示在了 DOM 结构上但有的时候我们并不希望有这个多余的节点出现这个又怎么进行解决呢
10、在 React 16版本里React提供了一个名为 Fragment的占位符来解决这个问题。也就是说我们可以从 react中引入这个 Fragment然后使用 Fragment来 代替最外层的 div元素
// 引入 Fragment
import React, { Component, Fragment } from react;class TodoList extends Component{render() {return (// 使用 Fragment 代替 divFragmentdivinput /button 提交 /button/divulliReact 入门-01/liliReact 入门-02/liliReact 入门-03/li/ul/Fragment)}
}export default TodoList11、再次观察 DOM 结构就会发现顶级 div的问题就解决了
到此本章的内容就结束了
