React H1畫空白

尋找這種非常基本的登錄狀態處理的一些幫助，以顯示某人是否登錄/ true或註銷/ false。

我有兩個組件，其中一個是安置isLoggedIn'狀態'的主要佈局。

另一個是我試圖將該狀態傳遞給的標題，以顯示。

雖然在Header中的console.log會正確輸出true/false，但當我嘗試將它打印到H1元素中時，它會失敗。

我試着在React chrome工具ext上查找，並將其交給this.props.children和this.status或this.isLoggedIn但沒有喜悅。

我在做什麼錯在這裏？

佈局

export default class Layout extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
    isLoggedIn: false 
    } 
} 

    render() { 

    setTimeout(() => { 
     this.setState({ 
     isLoggedIn: true 
     }) 
    }, 2000); 

    return (
     <div> 
     <Header status={this.state.isLoggedIn} /> 
     <Footer /> 
     </div> 
    ) 
    } 
}

HEADER

export default class Header extends React.Component { 
    render() { 
    console.log(this.props) 
    return (
     <div> 
     <h1>{this.props.status}</h1> 
     </div> 

    ) 
    } 
}

來源

2016-12-29 NewbieAid

在我看來，你是狀態設置爲一個布爾值，我不相信會在上半年內呈現標籤。如果你要傳遞一個字符串到狀態道具，我相信它會渲染那個字符串，和數字一樣。這裏的解決方案是將布爾值轉換爲字符串，以便在頁面上正確呈現。

使用類似： { String(this.props.status) }

來源

2016-12-29 21:30:48 Steve

迷人！非常感謝你@Steve - 我實際上只是在布爾周圍放置了語音標記，而不是使用String（），因爲它不是我用過的方法。儘管如此，下一場比賽將會有所發揮。一切順利！ – NewbieAid

這樣的工作，但建議，如果你決定測試布爾值，它將無法正常工作，如果你已經將它轉換爲一個字符串！ – Steve

乾杯。是的，我猜在這種情況下，你必須運行查詢測試字符串的內容，有點什麼？所以不是'if（status = false' then'if（status =='false'）'？ – NewbieAid

React H1畫空白

回答

相關問題