Проверьте, реагирует элемент пуст

Question

Я не хочу, чтобы сделать название, когда описание пусто

var description = <MyElement />; // render will return nothing in render in some cases 

if (!description) { // this will not work because its an object (reactelement) 
    return null; 
} 

<div> 
    {title} 
    {description} 
</div> 

Что правильный путь вместо описания! Чтобы проверить, если его пустым?

Answer 1

var description, title; 

if (this.props.description) { 
    description = <Description description={this.props.description} />; 

    if (this.props.title) { 
     title = <Title title={this.props.title} />; 
    } 
} 

<div> 
    {title} 
    {description} 
</div> 

Или просто:

render() { 
    const { description, title } = this.props; 

    return (
    <div> 
     {title && description && <Title title={title} />} 
     {description && <Description description={description} />;} 
    </div> 
); 
} 

Имо это лучшая практика, что если ваш элемент описания не требуется, то он не отображается, а не возвращать нуль в его визуализации. Поскольку вы, вероятно, отправляете данные через опору. Точно так же, если вы вообще не хотите отображать этот компонент, это должно произойти в родительском.