React基础中的单一标签包裹的问题

心已赠人 2021-09-17 09:58 237阅读 0赞

先上一段代码：

<div id="example">
    </div

function HelloMessage(props1) { 
         return (<h1>Hello { props1.name}!</h1>);
    }
    const element = <HelloMessage name="maomin"/>;
     
     ReactDOM.render(
         element,
         document.getElementById('example')
    );

页面：  
![这是页面显示的内容][20181222141809935.png]

但是如果你想在下面写一段话：“I am your grilfriend!”  
是这样写吗？

return (
     <h1>Hello { props1.name}!</h1>
     <h1>I am your grilfriend!</h1>
     );

但是这样出来就会报错：  
![报错][20181222142518313.png]  
所以我们这样处理：

return (
     <div>
     <h1>Hello { props1.name}!</h1>
     <h1>I am your grilfriend!</h1>
     </div>
     );

你还可以使用`<React.Fragment>`

return (
     <<React.Fragment>>
     <h1>Hello { props1.name}!</h1>
     <h1>I am your grilfriend!</h1>
     </<React.Fragment>>
     );

![sucess][]

[20181222141809935.png]: /images/20210812/3de6fd0fe1b9473da6ea0901b370d2f1.png
[20181222142518313.png]: /images/20210812/1b9088803a8c4ee2abc55b1d901d30b4.png
[sucess]: /images/20210812/4fada86e6e62441bad039c9faf0b455e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 P07:组件外层包裹原则、Fragment 标签的应用

React16 基础阐述新建服务组件组件外层包裹原则 Fragment 标签讲解阐述通过上面六节的学习，已经对Re

旧城等待，/ 2023年10月06日 20:45/ 0 赞/ 15 阅读

相关包裹算子对求解包裹相位差分时的作用

关于相对相位和绝对相位，包裹相位和展开相位的一点个人理解： 1、相对相位即为展开前的相位，也为包裹相位；绝对相位也是展开后的相位，也就是展开相位。在相位展开基本算法中，有

梦里梦外;/ 2023年07月25日 14:05/ 0 赞/ 20 阅读

相关使用React.Fragment替代render函数中div的包裹

1、在 React 中，render 函数中 return 的内容只能有一个根节点，如果多个元素嵌套，需要用一个标签元素包裹这个包裹的标签通常用 div，示例如下：

缺乏、安全感/ 2023年06月02日 09:16/ 0 赞/ 81 阅读

相关 React_react如何输入字符串标签，html标签

.js 字符串标签输入需要使用 dangerouslySetInnerHTML=\{ \{\_\_html:你好输入的字符串\}\} .html <div id

柔情只为你懂/ 2023年02月13日 00:23/ 0 赞/ 23 阅读

相关 和
标签的各自的包裹问题

W3C 标准里面有提到 a 不能包裹 button 或者 a 这些 interactive content 元素，直接在查看器编辑代码`<a><a>xx</a></a>`

ゝ一世哀愁。/ 2022年09月26日 13:54/ 0 赞/ 126 阅读

相关 React（16）包裹标签 React.Fragment

24、包裹标签 React.Fragment 在 Vue 里，我们会用 `<template></template>` 标签来包裹一些不能有父容器的复数同级标签。例如

比眉伴天荒/ 2022年05月31日 08:09/ 0 赞/ 185 阅读

相关对css中包裹性的浅显认识

从一个例子中看包裹性和水平对齐的两种方式《css世界》一书中有这么一个例子，（主要考察对包裹性的理解。）包裹性：（自适应性）指元素的尺寸只由内部元素决定，但是永远小

左手的ㄟ右手/ 2022年05月27日 12:06/ 0 赞/ 246 阅读

相关 js怎么获取div下包裹的多个标签的长度？

$("div > input").length或者你给这个div一个id ，然后document.getElementById("div\_id").getElementsB

柔情只为你懂/ 2021年12月08日 23:21/ 0 赞/ 334 阅读

相关 React基础中的单一标签包裹的问题

先上一段代码： <div id="example"> </div function HelloMessage(props1) {

心已赠人/ 2021年09月17日 09:58/ 0 赞/ 238 阅读

相关 React开发中遇到的问题

一.细节 React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。 1.React中state和props分别是什么？ props理解为从外

忘是亡心i/ 2021年09月15日 23:38/ 0 赞/ 742 阅读