条件为Unexpected token的JSX访问属性对象

Question

我的例子：

var props = {
    status:'root'
};

class ButtonYii extends React.Component{

    render(){

        return (
          { props.status? <p>admin</p> : <p>user</p>}
            )

    }
};

如何用JSX语法编写具有对象访问属性的条件？

Onlн这个替代方案？

isAdmin(){
        return props.status== 'root'
    }

    render(){

        return (
          isAdmin() ?<p>admin</p> : <p>user</p>
            )

    }

Answer 1

你可以这样做：

let props = {
  status: 'root'
};

class ButtonYii extends React.Component {
  render() {
    let userName = (props.status == 'root') ? 'admin' : 'user';

    return (
      <p>{userName}</p>
    );

  }
}

或者

let props = {
  status: 'root'
};

class ButtonYii extends React.Component {
  render() {

    return (
      <p>{ (props.status == 'root' ) ? 'admin' : 'user' }</p>
    );

  }
}