ReactDOM.render()函数、条件渲染、列表渲染

ReactDOM.render()

1、ReactDOM.render函数是整个 React 应用程序首次渲染的入口函数
2、ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM)。
3、该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，第二个参数是插入该模板的目标位置。
4、ReactDOM.render( JSX写的html模板，dom容器对象);
5、总结：一个react的程序，就是把JSX通过ReactDOM.render()函数渲染到网页上。程序员完成的是JSX的编写。

条件渲染

var sex='女';
if(sex=='男'){var sexJSX=<p>我是男的</p>;
}else{var sexJSX=<p>我是女的</p>;
}
ReactDOM.render(<ul>{sexJSX}</ul>,document.getElementById('box')
);注意：if语句不要写在单花括号里。

**列表渲染 **

//普通for循环let arr = ["铅笔","油笔","钢笔","毛笔"];
var arr2 =[];
for(let i in arr){arr2.push(<li>{arr[i]}</li>);
}const show = ()=> (<ul>{arr2}</ul>
)ReactDOM.render(show(),document.getElementById("box"));//map
//案例1
const goods = ['铅笔','钢笔'];
const goodsJSX = goods.map(function(val,index){return <li>{val}</li>
});             ReactDOM.render(//以下相当于react里的模板，不能出现js的语句，可以有表达式<ul>{goodsJSX}</ul>,document.getElementById('box')
);
//案例2var arr = ["大学","中庸","孟子","论语"]let jsxArr = arr.map(book=><li>{book}</li>);// ReactDOM.render(//     <div>//         <ul>//             {jsxArr}//         </ul>//     </div>//     , document.getElementById("box"));ReactDOM.render(<div><ul>{arr.map(book=><li>{book}</li>)}</ul></div>, document.getElementById("box"));

ReactDOM.render()函数、条件渲染、列表渲染相关推荐

【Vue】基础（三）条件渲染 - 列表渲染(key的作用与原理虚拟DOM解析) - 收集表单数据 - 持续更新中
目录 11. 条件渲染 11.1 v-if 11.2 v-show 12. 列表渲染 12.1 v-for(基本列表使用) 12.2 key的作用与原理真实DOM和其解析流程虚拟 DOM 的好处 ...
React条件渲染列表渲染
一.React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if.v-show: 在React中,所有的条件判 ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
ReactDOM.render 是如何串联渲染链路的？（中）
ReactDOM.render 是如何串联渲染链路的?(中) render 阶段可以认为是整个渲染链路中最为核心的一环,因为反复强调"找不同"的过程,恰恰就是在这个阶段发生的. ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...
iview使用render函数渲染嵌套表格
iview使用render函数渲染嵌套表格最近做项目遇到iview表格渲染,通过render函数来实现循环嵌套渲染表格及单元格内容,返回文字提示包含icon按钮的图标,当鼠标移到"复制&q ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...

ReactDOM.render()函数、条件渲染、列表渲染

ReactDOM.render()函数、条件渲染、列表渲染相关推荐

最新文章

热门文章