React H1 рисует пробел

Question

Я новичок!

Ищите некоторую помощь по этой самой базовой обработке статуса входа в систему, чтобы показать, зарегистрирован ли кто-либо в/истинном или выведенном из системы/false.

У меня есть два компонента, один из которых является основным расположением, в котором находится «состояние» isLoggedIn.

Другой - это заголовок, который я пытаюсь передать этому статусу для отображения.

Но хотя console.log в Header корректно выводит истину/ложь, когда я пытаюсь распечатать его в элемент H1 - он терпит неудачу.

Я пробовал смотреть на хром-инструменты React и чередовал это с этим.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> 

    ) 
    } 
} 

Answer 1

Мне кажется, что вы устанавливаете состояние в логическое значение, которое я не верю, что будет оказывать в пределах h1 тег. Если бы вы передали строку в status prop, я верю, что она будет отображать эту строку, то же самое с номером. Ваше решение здесь состояло бы в том, чтобы преобразовать логическое значение в строку, чтобы заставить его правильно отображать на странице.

Используя что-то вроде: { String(this.props.status) }