用reactjs向元素添加樣式的問題

Question

我正在學習反應並嘗試添加一個類，如果select元素擁有我想檢查的值。

class App extends Component { 
    test = 'volvo'; 
    render() { 
    return (
     <select style={{marginTop: '30px', marginLeft: '20px'}}> 
     <option value="volvo" className={test === 'volvo' ? "selected" : null}>Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
     </select> 
    ); 
    } 
} 

它給了我一個錯誤，在這裏我有三元運算符。有人能告訴我這樣做的正確方法嗎？ 謝謝！

Answer 1

由於您正在訪問類中的全局變量，因此您必須使用this關鍵字。

className={this.test === 'volvo' ? "selected" : null} 

Answer 2

在全局執行上下文（任何函數之外）中，這是指全局對象。嘗試下面的代碼。你必須使用this關鍵字。

class App extends Component { 
test = 'volvo'; 
render() { 
return (
    <select style={{marginTop: '30px', marginLeft: '20px'}}> 
    <option value="volvo" className={this.test === 'volvo' ? "selected" : null}>Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </select> 
); 
} 
}