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

心已赠人 2021-09-17 09:58 209阅读 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 条评论，209人围观）

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

相关阅读

相关面向对象设计：如何避免Java中的单一职责问题

在Java中，单一职责（Single Responsibility Principle, SRP）问题是代码结构不够清晰，一个类负责过多任务。以下是几种避免单一职责问题的方法：

- 日理万妓/ 2024年09月17日 01:33/ 0 赞/ 11 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 React中的组件通信问题

本次的代码都放在 [github.com/sunyongjian…][github.com_sunyongjian] ，可以 done 下来加深理解。父子组件

矫情吗；*/ 2022年05月27日 03:15/ 0 赞/ 148 阅读

相关 React -- react中关于构造函数中super(props)的问题

用react开发有一段时间了，有一个疑惑，为什么构造函数中需要写super(props)？第一种情况，假如我们不写会怎么样？ import React, { Co

约定不等于承诺〃/ 2022年04月05日 05:00/ 0 赞/ 243 阅读

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

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

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

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

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

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

相关 React开发中遇到的问题

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

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