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（``）を使用する必要があります。また、リテラル文字列の代わりにJS式に小文字を設定するために必要な構文があるので、テンプレートリテラルの周りに{}を使用する必要があります。