Sprawdź, czy reagują elementem jest pusty

Question

Nie chcę, aby uczynić tytuł gdy opis jest pusty

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> 

Co poprawny sposób zamiast opis! By sprawdzić czy jego puste?

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> 

Lub po prostu:

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

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

Imo lepsze to praktyka, że ​​jeśli elementem opis nie jest potrzebny, to nie jest renderowane zamiast powrocie zerowy w to render. Ponieważ prawdopodobnie wyślesz dane przez rekwizyt. I podobnie, jeśli nie chcesz renderować tego komponentu w ogóle, to powinno się zdarzyć w rodzicu.