Question

我有一个组件根据搜索按钮呈现正确的视图。现在它可以工作，但是如果找不到被搜索的用户，我还想显示屏幕消息。理想情况下，如果我的组件状态为null并且＆＃34;抱歉用户未找到＆＃34;如果搜索失败。

目前我正在使用

let allOrNo = this.props.view;
let renderMe;
 if(allOrNo === 'true') {
             renderMe= renderData;
 } else {
             renderMe = renderUser;
 }

return (
        <div>
            {renderMe}
        </div>
    )

renderData根据搜索用户名映射数据库中的所有用户和renderUser映射到用户。如何构建switch语句或添加到此条件语句以处理失败的搜索案例或在this.props.name ===＆＃39; blank＆＃39;时返回默认登录页面。？

Answer 1

<div>
    {this.props.view &&
      renderData //this will happen if this.props.view is truthy
    }
</div>

In React the＆amp;＆amp;只有前一个语句为true时，operator才会告诉以下JSX呈现。如果您想要渲染或不渲染，这通常是最佳解决方案。但是，在您的情况下，您希望基本上在两个视图之间切换，您可能需要三元运算符：

<div>
    {this.props.view ? renderData : renderUser}
</div>

基本上说： {this.props.view ? (do this if true) : (do this if false) }

要添加第三种情况，您可以这样做：

return (
        <div>
            {this.props.view ? renderData : renderUser}
            {this.props.name === 'blank' &&
                Sorry, user not found.
            }
        </div>
    )

如何根据条件渲染出正确的视图？

1 个答案: