Почему render () выдает эту ошибку: ':' ожидается

Question

Ошибка ':' expected появляется в методе рендеринга и указывает на &&.this.state.obj имеет тип MyType.

type MyType = {
    name: string,
};

constructor(props) {
   super(props);
   this.state = {
       obj: null
   };
}

componentDidMount() {
    this.setState({obj: {name: 'Vasya'}});
}

render() {
    return {this.state.obj && <MyComponent />};
}

Answer 1

Вы неправильно реализовали оператор возврата - используйте фигурные скобки return ().Используя return {}, вы возвращаете объект.Кроме того, обратите внимание, что лучше, если вы деструктурируете данные из состояния перед рендерингом.

render() {
    const {obj} = this.state;
    return (obj && <MyComponent />);
}

Answer 2

return возвращает объект, а не jsx.Попробуйте это

type MyType = {
    name: string,
};

constructor(props) {
   super(props);
   this.state = {
       obj: null
   };
}

componentDidMount() {
    this.setState({obj: {name: 'Vasya'}});
}

render() {
    return (
        {this.state.obj && <MyComponent />}
    );
}

или это:

type MyType = {
    name: string,
};

constructor(props) {
   super(props);
   this.state = {
       obj: null
   };
}

componentDidMount() {
    this.setState({obj: {name: 'Vasya'}});
}

render() {
    if (this.state.obj)
        return <MyComponent />;
    else
        return null;
}