使用react属性和es6模板特征构造字符串

Question

我需要使用react属性和es6模板功能构建href。我的代码在下面，但在渲染后，href中的subHeader不会被其值替换。

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表达式而不是某些文字字符串。