使用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表達式而不是某個文字字符串。