jsx dynamic classNameに予期しないトークンエラーが発生しました

Question

{IconsJson.map(obj => { 
    let className = 'sa-icon sa-icon-' + {obj.name}; 
    return <i className={className}>{obj.name}</i> 
})} 

なぜ上記の構文が無効ですか？マップはes6です。

Answer 1

書き込み、それをこのようにしてみてください：

{ 
    IconsJson.map((obj,i) => { 
     let className = `sa-icon sa-icon-${obj.name}`; 
     return <i key={i} className={className}>{obj.name}</i> 
    }) 
} 

注：各要素に一意のキーを割り当て、それ以外の場合は、警告がスローされます。 DOCを確認してください。

Answer 2

は

{IconsJson.map(obj => { 
    let className = 'sa-icon sa-icon-' + obj.name; 
    return <i className={className}>{obj.name}</i> 
})} 

Answer 3

これらの問題は、JSX構文で通常のJSとブレンドするときによく発生します。これを試すことができます -

{ 
    IconsJson.map(
     obj => <i key={obj.name} 
        className={`sa-icon sa-icon-${obj.name}`}>{obj.name}</i> 
    ) 
}