使用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>
  );
 }
}