Reactノート7(条件レンダリング)
5967 ワード
条件付きレンダリング
Reactでは、さまざまな必要な動作をカプセル化するために異なるコンポーネントを作成したり、アプリケーションの変換状態に応じて一部だけ更新したりすることができます.
まず
Grettingコンポーネントを作成し、ユーザーがログインしているかどうかに応じて異なるコンテンツを表示します.function UserGreeting(props) {
return Welcome back!;
}
function GuestGreeting(props) {
return Please sign up.;
}
function Greeting(props){
const isLoggedIn = props.isLoggedIn;
if(isLoggedIn){
return
}else{
return
}
}
ReactDOM.render(
,
document.getElementById('root')
)
要素変数
変数を使用して要素を格納することができます.条件付きレンダリングコンポーネントの一部に使用できます.出力の他の部分は変更しません.
次の2つのコンポーネントは、それぞれログアウトとログインを表します.
//
function LoginButton(props){
return (
)
}
//
function LogoutButton(props){
return (
)
}
次に、
LoginControlのコンポーネントを作成し始めました.彼は現在の状態に基づいて// 1
function UserGreeting(props) {
return Welcome back!;
}
// 2
function GuestGreeting(props) {
return Please sign up.;
}
//
function Greeting(props){
const isLoggedIn = props.isLoggedIn;
if(isLoggedIn){
return
}else{
return
}
}
//
function LoginButton(props){
return (
)
}
//
function LogoutButton(props){
return (
)
}
//
class LoginControl extends React.Component{
constructor(props){
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn:false};
}
handleLoginClick(){
this.setState({
isLoggedIn:true
})
}
handleLogoutClick(){
this.setState({
isLoggedIn:false
})
}
render(){
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if(isLoggedIn){
button =
}else{
button =
}
return(
{button}
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
変数を使用して
if文を使用するのは、条件レンダリングコンポーネントが出ない方法ですが、より簡潔な方法でjsxを使用できる場合があります.1.演算子と&&
jsxには、jsロジックと&&を含む括弧ラップコードを埋め込むことができます.彼は要素を簡単にレンダリングすることができます.
function Mailbox(props){
const unreadMessage = props.unreadMessage;
return(
hello
{unreadMessage.length>0&&
you have {unreadMessage.length} unread message
}
)
}
const message = ['react','reactdom','redux'];
ReactDOM.render(
,
document.getElementById('root')
)
// you have 3 unread message
これはjavascriptではtrue&&式が式を返し、false&&式がfalseを返し、falseがスキップを無視するためです.
2.三項演算子
条件が成立した場合はdo sometingを実行し、そうでなければコロン後文
condition?'do someting':'do noting' condition?true:falseを実行するdemo条件付きレンダリング
//demo1
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
The user is {isLoggedIn ? 'currently' : 'not'} logged in.
);
}
//demo2
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
{isLoggedIn ? (
) : (
)}
);
}
JavaScriptのように、チームの習慣に合わせて読みやすい方法を選ぶことができます.条件が複雑になりすぎると、コンポーネントを抽出する良いタイミングになる可能性があることを覚えておいてください.
3.コンポーネントのレンダリングをブロックする
ほとんどの場合、コンポーネントを非表示にしたい場合があります.他のコンポーネントがコンポーネントをレンダリングしても、
renderメソッドをnullに戻し、レンダリング結果を生成することなく、この要件を達成することができます.次の例では、
warnの値がfalseの場合、コンポーネントはレンダリングされません.function WarningBanner(props){
if(props.warn){
return null // return false
}
return (
Warning!!!
)
}
class Page extends React.Component{
constructor(props){
super(props);
this.state = {showWarning:true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick(){
this.setState(prevState=>({
showWarning:!prevState.showWarning
}))
}
render(){
return(
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
注意:コンポーネントの
render()メソッドはnullを返し、componentWillUpdateおよびcomponentDidUpdateのようなライフサイクルメソッドのコールバックには影響しません.