javascript - 在 render() 中 react 内联逻辑

Question

我只是想知道如何在 React 中应用内联模板逻辑。我的意思是万一我需要更改元素的类如何轻松地做到这一点？

class RegisterForm extends Component {
    ...
    render() {
        let email = this.state.email.error; //true or false
        return (<div {email ? className="has-error" : className="regular"}></div>)
}

然后我有一个错误:

Syntax error: C:/project/components/signup/index.js: Unexpected token, expected ... (107:22)

如何执行？或者只能在 if/else 完整的 div block 中包装？

Answer 1

你可以做几件事:

<div className={email ? "has-error" : "regular"}> </div>

或者保持清洁

let email = this.state.email.error;
let divClass = email ? "has-error" : "regular";

return <div className={divClass}> </div>