在渲染（）中反应内联逻辑

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 full div块吗？

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> 

Answer 2

赋值有条件的不属性。定义className属性并根据电子邮件值分配其值。

写这样的：

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