今天开始学React，之前大部分时间都是用的v-if，极少数时候用JSX时条件渲染是通过三目运算符完成的，React文档中对JSX的条件渲染比较详细，故记录一下
-
元素变量（if）
通过if判断返回不同的组件：function Btn(props) { if (props.isLoading) { return <button>Loading</button> } else { return <button>Submit</button> } }这种方式适合于条件渲染不同的组件。 -
“与”运算符（&&）
通过与运算符的特性（
true && expression总是会返回expression, 而false && expression总是会返回false）可以很方便的实现条件渲染function Btn(props) { const hasAccess = props.hasAccess; return hasAccess && <button>Submit</button> }值得注意的是，如果条件是一个非bool的变量/表达式
expression，那么在expression为false时，将会返回expression的值，例如：const messages = []; <MailBox unreadMessage={messages}></MailBox> /*---------Wrong-----------*/ function MailBox(props) { const unreadMessages = props.unReadMessages; return unreadMessages.length && <p>You have {unreadMessages} unread messages</p>; } // 将会渲染一个0 /*---------Correct-----------*/ function MailBox(props) { const unreadMessages = props.unReadMessages; return unreadMessages.length && <p>You have {unreadMessages} unread messages</p>; } // 什么都不会渲染 -
三目运算符
三目运算符类似于元素变量
function Btn(props) { return props.isLoading ? <button>Loading</button> : <button>Submit</button> } // 也可以直接在需要判断的地方使用 function Btn(props) { return <button>{ props.isLoading ? 'Loading' : 'Submit'}</button>; }三目运算符适合于组件内部小部分条件渲染。
-
阻止组件渲染
阻止组件渲染是在返回前使用if判断，如果满足特定条件，则提前返回
null，阻止组件渲染function Btn(props) { if (!props.hasEdit) { return null; } return <button>Edit</button>; }
