react-native - React Native：有条件地渲染组件

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}.

标签： react-native

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>
    );
  }
}