使用react属性和es6模板功能构建字符串

Question

我需要使用react属性和es6模板功能构建href。然而，我的代码是在渲染subHeader在href之后不会被替换为它的值。

subHeaders = this.props.subHeaders.map((subHeader, i) => { 
    return <a className="articleSidebar__summaryText" href='#${subHeader}' key={i}>{subHeader}</a>; 
}); 

我该如何做到这一点？

Answer 1

您在href部分中没有使用正确的语法。

您是否试图获得类似#something的输出？在这种情况下，它应该是：

href={`#${subHeader}`} 

您需要使用template literals（``）当你想要做的串插。而且你需要围绕模板文字使用{}，因为那是你需要使用的语法，以便将某个prop设置为某个JS表达式而不是某个文字字符串。