React에서 스타일을 보간하는 방법은 무엇입니까?

Question

내 React 앱에서 언어별로 단어를 색칠하고 싶습니다. 내 말의

english: { 
    // style here 
} 

french: { 
    // style here 
} 

spanish: { 
    // style here 
} 

// etc. 

각 (entrys)는 language 키/값 쌍을 포함하는 객체, 즉 {language: french}입니다 : 내가 좋아하는 일을 포함하는 styles 파일을 가지고있다.

은 (는) case/switch 문을 길게 만들지 만 짧은 방법을 찾고 있습니다. 나는 언어를 많이 가지고 특히, 불필요하게 반복되는 것 같다

var color; 

switch (entry.language) { 
    case 'english': 
    color = styles.english; 
    break; 
    case 'french': 
    color = styles.french; 
    break; 
// etc. 

<div style={color}> {entry.word} </div> 

: 여기 내 case/switch 문입니다. 대신에, 난 그냥 같은, 내 div에 뭔가를 entry.language을 보간 할 수 있도록하려면 :

<div style={styles.{entry.language}} {entry.word} </div> 

작동하지 않습니다. 그것을 할 수있는 방법이 있습니까?

Answer 1

원하는 것은 개체에 액세스하는 것입니다. 대괄호 표기법이 필요합니다.

<div style={styles[entry.language]} >{entry.word} </div>