Javascript 在 React 中连接变量和字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39523040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Concatenating variables and strings in React
提问by lost9123193
Is there a way to incorporate React's curly brace notation and an hreftag? Say we have the following value in the state:
有没有办法结合 React 的花括号符号和href标签？假设我们在状态中有以下值：
{this.state.id}
and the following HTML attributes on a tag:
以及标签上的以下 HTML 属性：
href="#demo1"
id="demo1"
Is there a way I can add the idstate to the HTML attribute to get something like this:
有没有办法可以将id状态添加到 HTML 属性中以获得如下内容：
href={"#demo + {this.state.id}"}
Which will yield:
这将产生：
#demo1
回答by Andrew Li
You're almost correct, just misplaced a few quotes. Wrapping the whole thing in regular quotes will literally give you the string #demo + {this.state.id}- you need to indicate which are variables and which are string literals. Since anything inside {}is an inline JSX expression, you can do:
你几乎是正确的，只是放错了几个引号。将整个内容用正则引号括起来会字面上给出字符串#demo + {this.state.id}- 您需要指出哪些是变量，哪些是字符串文字。由于里面的任何内容{}都是内联 JSX表达式，您可以执行以下操作：
href={"#demo" + this.state.id}
This will use the string literal #demoand concatenate it to the value of this.state.id. This can then be applied to all strings. Consider this:
这将使用字符串文字#demo并将其连接到this.state.id. 然后这可以应用于所有字符串。考虑一下：
var text = "world";
And this:
和这个：
{"Hello " + text + " Andrew"}
This will yield:
这将产生：
Hello world Andrew
You can also use ES6 string interpolation/template literalswith ` (backticks) and ${expr}(interpolated expression), which is closer to what you seem to be trying to do:
您还可以使用带有 `（反引号）和（内插表达式）的ES6 字符串插值/模板文字${expr}，这更接近您似乎想要做的事情：
href={`#demo${this.state.id}`}
This will basically substitute the value of this.state.id, concatenating it to #demo. It is equivalent to doing: "#demo" + this.state.id.
这将基本上替换 的值this.state.id，将其连接到#demo。它相当于做："#demo" + this.state.id。
回答by Kevin Laurente
the best way to concat props/variables:
连接道具/变量的最佳方式：
var sample = "test";
var result = `this is just a ${sample}`;
//this is just a test
回答by Yunus ER
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=
例子1=
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=
例子2=
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());
I recommend second example , it is faster.
我推荐第二个例子，它更快。
