Question

有没有办法合并React的大括号表示法和href标签？假设我们在州内有以下值：

{this.state.id}

以及标记上的以下HTML属性：

href="#demo1"
id="demo1"

有没有办法可以将id状态添加到HTML属性中以获得这样的内容：

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

将产生：

#demo1

Answer 1

你几乎是正确的，只是放错了一些引号。在常规引号中包装整个内容将字面上给出字符串#demo + {this.state.id} - 您需要指出哪些是变量，哪些是字符串文字。由于{}内的任何内容都是内联JSX 表达式，您可以执行以下操作：

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

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

var text = "world";

而且：

{"Hello " + text + " Andrew"}

这将产生：

Hello world Andrew

你也可以使用ES6字符串插值/ template literals和`（反引号）和${expr}（插值表达式），这更接近你想要做的事情：

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

这基本上会替换this.state.id的值，将其连接到#demo。它等同于："#demo" + this.state.id。

Answer 2

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

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

Answer 3

exampleData =


        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;
        });

example1 =

        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());

example2 =

{{1}}

我推荐第二个示例，它更快。

Answer 4

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

 <img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>

Answer 5

用于在 React 中使用 map 连接变量和字符串，例如：

{listOfCategories.map((Categories, key) => { return ( <a href={`#${Categories.designation}`} className="cat-link" key={key}> </div> </a> ); })}

在React中连接变量和字符串

5 个答案: