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块？

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>

在render（）中反应内联逻辑

2 个答案: