react 后端请求到class类型的数据如何渲染

L一个小白

已于 2023-02-17 14:10:05 修改

阅读量297

点赞数

于 2021-03-26 23:28:10 首次发布

本文链接：https://blog.csdn.net/L1770679549/article/details/115257375

版权

关键词由CSDN通过智能技术生成

class类型的数据

mack: "<span style=\"color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1\">&#x7206;&#x54C1;</span> 
            <span style=\"color: #FB4C81;background: ; border-color: #FB4C81\">&#x4E00;&#x8D77;&#x62FC;</span>  "

上面是我们常用的react数据
但是我们渲染时会直接渲染出来不能变成class方式
这里面我们需要使用react中的

dangerouslySetInnerHTML

以下面的方式渲染出来

<span dangerouslySetInnerHTML={{__html:item.mack}}></span>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

L一个小白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React后端分页

布兰登*佩琪

09-15

546

api下是axios的二次封装 index.js import axios from 'axios'; var service = axios.create({ //创建实例 baseURL:'/hd', //所有请求都会带上 /hd "content-type":"application/json", //请求类型 timeout:5000 //超时选项 }) // 请求拦截器 service.interceptors.request.use((config)=>{ c

react 渲染前请求ajax,react之异步请求数据，render先行渲染报错，未拿到数据

weixin_32349223的博客

08-05

1993

import React from 'react'import {connect} from 'react-redux'import { Redirect} from 'react-router-dom'import axios from 'axios'import {login} from './Auth.redux.js'//两个reducers 每个reducers都有一个state@con...

参与评论您还未登录，请先登录后发表或查看评论

react与后台交互获取并渲染数据（适合初学者）一个完整的demo

热门推荐

dayexiaofan的博客

10-23

4万+

前提：已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西提示：因为这里不能直接访问到我的后台，所以这里用虚拟数据作为后台安装json-server 首先...

react：class、style渲染和渲染html

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

04-27

257

class // 静态写法 const styleElem = 设置class // 动态写法 const styleElem = 设置class 注意：要用className style // 动态写法 const styleData = { fontSize: '30px', color: 'blue' } const s

关于react通过后端数值，渲染对应的节点标签

Benz_s600的博客

04-28

363

前言：本功能主要实现，在react中通过接收后端数值，比如5，就渲染5个span标签 1.在react项目中 {this.renderStar(this.state.item.detail.favoritedCount)} 2.调用 renderStar 方法，传回了一个值，这个值就是后端数值，比如5 3.书写 render...

React使用axios请求后端数据并渲染到页面上

liulang68的博客

11-26

3835

import React from "react"; import axios from "axios"; import Network2 from "./Network2" class Network extends React.Component { constructor(props) { super(props); this.state = { newslist:[] }; } componentDidMount() { /* H

react项目中使用后端返回的JSON数据生成路由

最新发布

XiZiRuanJianKeJi的博客

08-16

742

使用后端返回的数据来动态生成react项目的路由

react 简单的数据渲染到页面（复习）

weixin_68983685的博客

08-01

920

react 利用map 做简单的数据渲染

react接收后端文件_React 文件流实现文件下载

weixin_39849054的博客

12-20

4215

同种方法-两种方案：第一种：页面上自己手动添加a标签第二种：js自动生成a标签(推荐第二种)今天在react项目开发过程中，有这样的一个需求就是文件下载。自己认为：通过接口请求后端发给返给自己的会是一个文件下载的地址或者路径什么的，只要把这个地址赋值给a链接即可实际情况：后端发给我的是一端文件流，那么就是需要们自动去解析文件流，然后把解析出来的数据，通过a标签进行下载第一种方案：//点击文件下载o...

React获取Java后台文件流并下载Excel文件流程解析

08-19

React获取Java后台文件流并下载Excel文件流程解析是指在React前端应用程序中，通过axios库发送POST请求到Java后台服务器，以获取Excel文件流，并将其下载到本地计算机中。该过程涉及到Java后台服务器的响应头设置、...

React获取api数据并渲染

qq_34227291的博客

07-02

3204

React获取api数据并渲染 1：进入当前项目安装axios 命令：npm install axios 引入：const axios = require('axios'); 2：安装路由命令：npm install react-router-dom 引入：import { Link } from "react-router-dom"; API接口地址：列表API接口：http://a...

React如何对列表数据渲染以及key

张培跃的个人博客

09-06

5600

列表数据在项目中很常见，身为前端工程师的你几乎天天都要与列表数据打交道，像新闻列表、用户列表、流水列表等等。本篇文章主要讨论在React.js中如何渲染列表数据。 1、将元素放到数组中直接渲染之前曾经说过，一个数组直接放到JSX当中，那么会被直接展开。那么数组里直接存放元素内容呢？示例： class Book extends React.Component{ ren...

react后台数据渲染(封装) loading 处理

冠日的个人博客

10-07

1054

//初始化数据 componentDidMount(){ this.request(); } //调接口 request=()=>{ axios.get("https://www.easy-mock.com/mock/5d98c57b8c63954ea11dd31e/table").then((res)=>{ console.l...

React学习5(React class 组件)

qq_40600414的博客

08-25

2463

react class组件的生命周期

渲染---分类渲染

DanBo_C的博客

08-11

769

1.效果图 2.与唯一值渲染相比不同的只有渲染方式的设置唯一值渲染： renderer.addValue("C", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5]))); renderer.addValue("B", new SimpleFillSymbol(...

1022 vuex Two Day mapState and mapMutations

CF1402345274的博客

10-23

177

1022 vuex Two day 主要讲 ECharts 有问题，多去看看 package.js 看版本号,毕业设计有问题的话问老师 store 拆分成模块。使用常量替代 Mutation 事件类型,创建 mutations-types.js ,存储 mutation 的常量 const 定义的东西都时不能修改的，所以用来定义常量，对象除外，因为对象存储的是地址，不是值。 Mutation 必须是同步函数 ... 展开运算符。 ...mapMutations(['updateArr']) 是拷贝一个数组

数据请求类写法

qq_45807416的博客

03-06

108

新建一个class构造函数传参数，写post.get等方法，然后写一个请求函数在post等里面调用。在这个request请求方法里做请求拦截的验证。

React class组件数据总结

qq_25919495的博客

02-19

520

classAppextendsReact.Component{ constructor(){ super(); this.state={ name:'哈哈' } } changData(){ this.setState({name:'嘻嘻'}) } render(){ return( <divclassName="App"> <h4&g...

react的网络请求数据 get 请求实现方法

weixin_45301448的博客

01-31

7296

首页我直接把请求过来的参数直接放在了生命周期函数里面下面是请求到的数据然后我们需要把数据遍历到页面上，需要设定一个变量 banners: [’’] 用来接收请求的数据，渲染到页面上 constructor(){ super(); this.state = { banners: [''] } } componentDidMount(){ f...

react实现进入页面自动向后端获取数据

05-30

你可以在React组件的生命周期方法componentDidMount()中向后端发起数据请求。这个方法会在组件挂载完成后自动调用，所以可以在这里执行你的数据请求操作。你可以使用`fetch`或`axios`等库发起HTTP请求，获取数据后再...