07 React中条件渲染

简介: 07 React中条件渲染

17==》 条件渲染


state初始化一般写在构造器当中


CharShop.js如下


import React, { Component } from "react";
export default class CharShop  extends Component {
    // state初始化一般写在构造器当中
    constructor(props){
        super(props);
        this.state={
            goods: [{ id: 1, text: "web111" }, { id: 2, text: "web222" },{ id: 3, text: "web333" }]
        }
    }
     render(){
        //  获取state中的内容
         let con = this.state.goods[0].text ? <h1>{this.state.goods[0].text}</h1>:null   //条件渲染 
         return(
             <div>
               {con}
             </div>
         )
     }
相关文章
|
1月前
|
前端开发 JavaScript
React如何进行条件渲染
React如何进行条件渲染
14 0
|
11天前
|
前端开发 JavaScript
REACT 条件渲染
REACT 条件渲染
|
1月前
|
存储 JavaScript 算法
React聚焦渲染速度
React聚焦渲染速度
27 0
|
30天前
|
前端开发 JavaScript
React中渲染html结构---dangerouslySetInnerHTML
React中渲染html结构---dangerouslySetInnerHTML
27 0
|
1月前
|
前端开发 JavaScript 算法
React渲染流程
应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。
20 3
|
1月前
|
存储 前端开发 JavaScript
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。
|
1月前
|
存储 JSON 资源调度
next.js博客搭建_react-markdown渲染内容(第三步)
next.js博客搭建_react-markdown渲染内容(第三步)
12 1
|
1月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
1月前
|
前端开发 JavaScript
React渲染性能的优化
React渲染性能的优化
32 2
|
1月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
77 0