Question

我已经搜索了这个问题，并找到了一个解决方案，该解决方案要求根据以下状态有条件地进行渲染：

  render() {

    const content = this.state.isReady ? <Home/> : <Splash/>;

    return (
      {content}
    );
  }

但是，我不断收到Invariant Violation: Objects are not valid a React child (found object with keys {content}.

Answer 1

您的拼写错误，您返回了Object，而是在JSX元素之间使用：

const Ready = () => <div>Ready</div>
const NotReady = () => <div>NotReady</div>

class App extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }

  render() {
    const content=this.state.isReady ? <Ready /> : <NotReady />
    return (
      <div>
        {content}
      </div>
    );
  }
}

Answer 2

使用简单的if if else代替三元表达式，因为有时三元运算符会“返回”内部的任何内容，并且无法执行代码块。

if (this.state.isReady) {
    return <Home />
} else {
    return <Splash />
}

React Native：有条件地渲染组件

2 个答案: