精华内容
下载资源
问答
  • react 字符串与组件(JSX)如何拼接?
    千次阅读
    2020-05-28 13:57:02

    相信大家在开发中都遇到过这种问题

    <a onClick={this.expandFilter} >{isExpanded ? '展开' : '收起'} {isExpanded ? <UpOutlined/> : <DownOutlined/>}</a>
    

    点击展开和收起时更新a标签中对应的内容,不过因为符号是一个组件,不能简单的处理,其实只需要在外层添加一个div就可。

    <a onClick={this.expandFilter} >{isExpanded ? <>展开<DownOutlined/></> : <>收起<DownOutlined/></>}</a>
    

    是不是就变的简单了

    更多相关内容
  • jsx字符串换行

    2021-08-20 19:01:30
    jsx中实现字符串换行,首先需要换行的核心属性就是css中的white-space 首先我们先设置样式css .DetailsTitle{ width: 100%; word-wrap: break-word; white-space: pre-wrap; } 为了方便对比,我们写3种...

    在jsx中实现字符串换行,首先需要换行的核心属性就是css中的white-space

    首先我们先设置样式css

          .DetailsTitle{
            width: 100%;
            word-wrap: break-word;
            white-space: pre-wrap;
          }

    为了方便对比,我们写3种实现的方式

    <View className='DetailsTitle'>{'1、20210817全流程测试试卷\n2、考试须知二\n3、考试须知三'}</View>
    
    <View className='DetailsTitle'>{'后台返回测试'}</View>
    <View className='DetailsTitle'>{notesec}</View>
              
    <View className='DetailsTitle'>{'dangerousHtml测试'}</View>
    <View className='DetailsTitle' dangerouslySetInnerHTML={{ __html: notesec }} ></View>

    后台返回的字符串如下:

    1、20210817全流程测试试卷/\n2、考试须知二\n3、考试须知三\\n4、考试须知四;5、考试须知四

    可以看到如果直接将带有\n的字符串返回,是可以实现换行的。但是当这段字符串放到变量中,就不会实现换行了二和三之间是/n 没有换行

     

           console.log('请求结果为----', res.data)
            console.log('原来的examNotes', res.data.examNotes)
            let tempsec: string = res.data.examNotes
            setnotesec(tempsec)

    可以看到js中我们已经将考试须知的examNotes字段转换为字符串,但是并不能像最上面一行直接写字符串一样。不论用第二种写法 还是第三种dangerousHtml的写法都不好用。网上说的一般都是用第三种写法去解析后台数据。实测不好用。后台返回数据尝试了\/n  \n \\n <br/>多种换行符号 都不好用

    正确的解决方法:

    <View className='DetailsTitle'>{'1、20210817全流程测试试卷\n2、考试须知二\n3、考试须知三'}</View>
    
    <View className='DetailsTitle'>{'后台返回测试'}</View>
    <View className='DetailsTitle'>{note}</View>
    
    <View className='DetailsTitle'>{'dangerousHtml测试'}</View>
    <View className='DetailsTitle' dangerouslySetInnerHTML={{ __html: note }} ></View>

    显示部分写法还是这样。主要是js方面的处理,如下代码

            //replace处理后台数据
            let temp: string = res.data.examNotes
            let newtemp = temp.replace(/;/g, "\n");
            console.log('处理后的examNotes', newtemp)
            setnote(newtemp)

    通过正则的方式去把分号替换成\n我们试下效果。    

    可以看到 4和5之间的分号被替换了\n 实现了换行。这个字符串中的\n必须是我们处理的才可以在jsx中识别到实现换行。另外第二种写法和第三种写法dangerousHtml实测没有差距。也就是说第三种写法对于处理字符串换行是没有额外效果的

    接下来我们继续尝试 如果想把\n都替换为换行,那么还涉及到转义的问题,服务器返回的\n是经过转义的,所以我们如果想要replace替换的话 需要替换\\n

            //replace处理后台数据
            let temp: string = res.data.examNotes
            let newtemp = temp.replace(/\\n/g, "\n");
            console.log('处理后的examNotes', newtemp)
            setnote(newtemp)
    

    效果如下:完美的解决了jsx中换行的问题

     

     

    展开全文
  • 如何将字符串JSX结合使用我已经使用react-string-replace来获得这个工作,但它似乎不能与HTML一起工作,因为标签被React转义。有谁知道这可能会如何解决?import React from 'react';import replace from 'reac...

    我有一个服务器响应,其中包含一个作为prop传递给反应组件的html字符串。在html中有代码需要用React组件代替。如何将字符串与JSX结合使用

    我已经使用react-string-replace来获得这个工作,但它似乎不能与HTML一起工作,因为标签被React转义。有谁知道这可能会如何解决?

    import React from 'react';

    import replace from 'react-string-replace';

    const reg = /\{(name)\}/g;

    const Name = props => {

    return (

    Hello {props.name}

    )

    }

    class Embed extends React.Component {

    render() {

    const person = this.props.person

    const component = ;

    const output = replace(

    this.props.content,

    reg,

    prop => component

    );

    return (

    {output}

    )

    }

    }

    const Greeting = props => {

    return ;

    };

    export default Greeting;

    2017-02-15

    Adam

    展开全文
  • Example: 我已经成功地使用了React的危险的setinnerhtml来呈现我从一个API中得到的HTML字符串响应,但是现在我需要添加一个click处理程序到一些由危险的lysetinnerhtml设置的响应中。是否有一种方法可以将处理程序...

    I have successfully used React's dangerouslySetInnerHTML to render HTML string responses I'm getting from an API, but now I need to add a click handler to parts of certain responses that are set by dangerouslySetInnerHTML. Is there a way to add handlers to dangerouslySetInnerHTML conent? Example:

    我已经成功地使用了React的危险的setinnerhtml来呈现我从一个API中得到的HTML字符串响应,但是现在我需要添加一个click处理程序到一些由危险的lysetinnerhtml设置的响应中。是否有一种方法可以将处理程序添加到危险的setinnerhtml中?例子:

    var api_response = 'example';

    return

    function _markupFromString (msg) {

    return { '__html': msg };

    }

    2 个解决方案

    #1

    0

    This isn't going to work. dangerouslySetInnerHTML() doesn't work with JSX. A better strategy would be to have the AJAX call simply return the required strings and (link and title) and supply a component with these values as props. The component is simply the link in this situation.

    这行不通。setinnerhtml()与JSX不兼容。更好的策略是让AJAX调用简单地返回所需的字符串(链接和标题),并以这些值作为道具提供一个组件。组件只是这种情况下的链接。

    #2

    0

    Or you can add your SVG in the file public/index.html then create In your component a function like this

    或者可以在文件public/index中添加SVG。然后在组件中创建一个这样的函数。

    doSomething() {

    console.log('ajajaj');

    }

    componentDidMount() {

    window.NameVarible = this.doSomething;

    }

    And add your event onClick="NameVariable()" in the SVG

    在SVG中添加事件onClick="NameVariable()"。

    展开全文
  • //js字符串常见方法 var str = prompt("请输入字符串"); //1,toUpperCase(),toLowerCase(),将字符串的字符全部转为大写,小写 // var re = str.toUpperCase(); // console.log("转为大写"+re); //2,charAt(Number),...
  • ES6 (三)字符串的扩展、模板字符串、模板编译、标签模板 文章目录ES6 (三)字符串的扩展、模板字符串、模板编译、标签模板1. 字符的 Unicode 表示法2. 字符串的遍历器接口3. 直接输入 U+2028 和 U+20294. JSON....
  • 虽 然 JavaScript 有很多用处,但是处理字符串是其中最流行的一个。下面让我们深入地分析一下使用 JavaScript 操作字符串。在 JavaScript 中, String 是对象。 String 对象并不是以字符数组的方式存储的,所以我们...
  • JavaScript never had a true good way to handle multiline strings, until 2015 when ES6 was ... JavaScript从来没有一种真正的好方法来处理多行字符串,直到2015年ES6连同模板文字一起被引入。 Template li...
  • JSX解析

    2020-11-05 10:24:29
    什么是JSX JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html...3、在标签中添加属性,属性值为字符串时使用"",为对象或表达式时使用{},key采用驼峰命名,另外添加自定义需要渲染的属性,最
  • ES6:模板字符串

    2021-07-16 01:13:45
    标签: 模板字符串 JavaScript ES6 前端 web本博客版权归本人和饥人谷所有,转载需说明来源内容转载自阮一峰老师的ES6入门1.基本用法传统的JavaScript语言,输出模板通常是这样写的。$('#result').append('There are ...
  • 即可避免转义的问题,将字符串中包含的 HTML标签生效。 <div ref="introContent" class="intro__content">{{intro}}</div> mounted() { // let text = this.$refs.introContent.innerText; // this.$...
  • String 字符串详解

    2022-04-08 14:59:51
    String 字符串详解 1. String 字符串类型 1-1 字符串引号 字符串可以包含在单引号 ''、双引号 "" 或反引号 `` 中 单引号和双引号不能混用 同类引号不能嵌套:双引号里不能再放双引号,单引号里不能再放单引号 单...
  • 例如: render{ return( &lt;div&gt; &lt;div&gt;接下来是例子&lt;/div&gt; &lt;div dangerouslySetInnerHTML={{_...这是一个带有html标签的字符串 &lt;/span&gt;"}..
  • 生成的字符串 hyperscript h()为给定HTML字符串的函数调用。 旨在更轻松地将标记片段(特别是生成的 SVG 文件)嵌入到使用h()呈现标记(而不是 JSX)的 JavaScript 源代码列表中。 安装 npm install ...
  • react将字符串转为标签

    千次阅读 2019-08-28 14:45:26
    React不支持直接将字符串放到render返回值中,这样放入的字符串会被当做一般字符串处理。 1 2 3 4 5 6 7 8 const App = () => { const str = '<div>test</div>'; return ( <...
  • 为什么React选择了JSXJSX的书写规范:jsx的使用jsx的注释如何书写jsx嵌入变量一:当变量是Number、String、Array类型时,直接显示二:当变量是null、undefined、Boolean类型时,内容为空三:对象类型不能作为子元素...
  • ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们看起来与普通字符串并无二致。在最简单的情况下,它们与普通字符串的...
  • 属性自定义属性:组件props中声明的属性原生属性:没有声明的属性,默认自动挂载到组件根元素上,设置inheritAttrs为false可关闭自动挂载特殊属性:挂载到组件根元素上,支持字符串、对象、数组等多种语法事件普通...
  • 在JavaScript中将数组转换为字符串

    千次阅读 2020-08-12 02:01:01
    当您无法使用某些更现代的语法选项时,处理多个行字符串和/或标记仍然非常方便。 结论 (Conclusion) Even if all you’re trying to do is display a comma separated list of array items to a user, you can ...
  • dangerouslySetInnerHTMl 属性 很多时候我们做一个项目接口会返回一段 ...由于react 项目中是 JSX 语法,JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,本人就遇到了这样的问题,(还是渲染这段...
  • 使用JSX创建元素 使用JSX时,它会替我们处理好创建ReactElement对象的工作 var newDom = 你好,react等价于React.createElement('b',null,'你好,react') JSX解析器将读取该字符串并为我们调用React.createElement...
  • 今天我们通过不依赖任何第三方库的方式,抛弃边界处理、性能优化、安全性等弱相关代码手写一个基础版的 React,供大家学习和理解 React 的核心原理。知乎不支持代码片段高亮和内嵌 CodeSandbox,建议收藏后阅读博客...
  • JSX语法的基本使用 一、什么是JSXJSX是React的核心组成部分,是一种JavaScript语法扩展,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树...
  • 在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解。很明显,回答失败。通过 github 上搜索 template+vnode 的关键词,让我搜...
  • 字符串的扩展

    2021-06-21 11:36:15
    本章介绍 ES6 对字符串的改造和增强,下一章介绍字符串对象的新增方法。 ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。 "\u0061" // "a" 但是,这种表示法只...
  • ES6之模板字符串

    2018-10-31 11:42:59
    但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串处理成多个参数,再调用函数。 var a = 5; var b = 10; tag`Hello ${ a + b } world ${ a * b }`; // 等同于 tag(['Hello ', ' world...
  • jsx2html场景将下面的jsx转换为htmlconst items = ['one', 'two', 'three']; const SearchData = ({ data = [] }) => { let list = null; if (data.length) {list = data.map((l, k) => ({l}));} else {list =...
  • 如果是字符串变量中包含\n换行符,只需在css样式中加入whiteSpace: 'pre-wrap'即可实现解析\n换行符。例如: let str = '要解析出换行符\n要解析出\n换行\n符' <div style={{whiteSpace: 'pre-wrap'}}>{{...
  • 对于正常的字符串大家都知道怎么处理,但是加上html标签就不能直接展示了 在vue中有v-html可以轻松的插入,在react中也提供了一个可以帮我们将HTML字符串解析为html代码标签属性—dangerouslySetInnerHTML 其使用方法...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,882
精华内容 3,952
关键字:

jsx 处理字符串