复杂的第三级if-else语句(jsx)

Question

之前处理过jsx语句，所以我很有信心这很好，但最后的骨架块似乎也显示在移动设备上，这不是预期的

{!isMobile && 
!session ?
<NormalComponent />
: data ?
<UserComponent />
: <div className="d-flex flex-column">
<Skeleton width={150} height={28} />
<br /><br />
<Skeleton circle={true} height={65} width={65} className="mr-2" />
</div>
}

以上试图等同于：

if (!isMobile) {
if (!session) {
<NormalComponent />
}else{
if (data) {
<UserComponent />
}else{
// show skeleton stuff while it loads data
}
}
}

Answer 1

语句!isMobile && !session被视为单个布尔表达式，它影响第一个三进制。在您的情况下，如果isMobile是true，则不希望渲染任何内容。

用括号括起!session三进制：

const NormalComponent = () => <div>NormalComponent</div>
const UserComponent = () => <div>UserComponent</div>
const Skeleton = (props) => <div {...props}>Skeleton</div>
const Demo = ({ isMobile, session, data }) => (     
!isMobile && (
!session ?
<NormalComponent />
: data ?
<UserComponent />
: <div className="d-flex flex-column">
<Skeleton width={150} height={28} />
</div>
)
)
ReactDOM.render(
<React.Fragment>
isMobile is falsy - renders skeleton:
<Demo session />
<br />
isMobile true - render nothing:
<Demo isMobile session />
</React.Fragment>,
root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

一个更可读的解决方案是使用if，并在满足条件后立即返回：

const NormalComponent = () => <div>NormalComponent</div>
const UserComponent = () => <div>UserComponent</div>
const Skeleton = (props) => <div {...props}>Skeleton</div>
const Demo = ({ isMobile, session, data }) => {
if(isMobile) return null;

if(!session) return <NormalComponent />;

return data ?
<UserComponent />
: (
<div className="d-flex flex-column">
<Skeleton width={150} height={28} />
</div>
);
};
ReactDOM.render(
<React.Fragment>
isMobile is falsy - renders skeleton:
<Demo session />
<br />
isMobile true - render nothing:
<Demo isMobile session />
</React.Fragment>,
root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>