在React中连接变量和字符串

2020/10/24 14:41 · javascript ·  · 0评论

有没有办法整合React的花括号符号和href标签?假设我们在状态中具有以下值:

{this.state.id}

以及标签上的以下HTML属性:

href="#demo1"
id="demo1"

有没有一种方法可以将id状态添加到HTML属性中以获得类似以下内容:

href={"#demo + {this.state.id}"}

这将产生:

#demo1

您几乎是正确的,只是放了一些引号。用正则引号将整个内容包装起来,就可以从字面上得到字符串#demo + {this.state.id}-您需要指出哪些是变量,哪些是字符串。由于内部的任何内容{}都是内联JSX表达式,因此您可以执行以下操作:

href={"#demo" + this.state.id}

这将使用字符串文字#demo并将其连接到的值this.state.id然后可以将其应用于所有字符串。考虑一下:

var text = "world";

和这个:

{"Hello " + text + " Andrew"}

这将产生:

Hello world Andrew 

您还可以将ES6字符串插值/模板文字与`(反引号)和${expr}(插值表达式)配合使用,这与您似乎想做的事情更接近:

href={`#demo${this.state.id}`}

这将基本上替代的值this.state.id,并将其连接到#demo等效于:"#demo" + this.state.id

连接道具/变量的最佳方法:

var sample = "test";    
var result = `this is just a ${sample}`;    
//this is just a test

exampleData =

        const json1 = [
            {id: 1, test: 1},
            {id: 2, test: 2},
            {id: 3, test: 3},
            {id: 4, test: 4},
            {id: 5, test: 5}
        ];

        const json2 = [
            {id: 3, test: 6},
            {id: 4, test: 7},
            {id: 5, test: 8},
            {id: 6, test: 9},
            {id: 7, test: 10}
        ];

example1 =


        const finalData1 = json1.concat(json2).reduce(function (index, obj) {
            index[obj.id] = Object.assign({}, obj, index[obj.id]);
            return index;
        }, []).filter(function (res, obj) {
            return obj;
        });

example2 =

        let hashData = new Map();

        json1.concat(json2).forEach(function (obj) {
            hashData.set(obj.id, Object.assign(hashData.get(obj.id) || {}, obj))
        });

        const finalData2 = Array.from(hashData.values());

我推荐第二个例子,它更快。

您可以简单地做到这一点。

 <img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>
本文地址:http://javascript.askforanswer.com/zaireactzhonglianjiebianlianghezifuchuan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!