Как использовать переменную/пропеллер в тройном оператора

Question

Этот компонент делает хорошо:

const Footer =() => { 
    let dataDiv = <div>Data is: Some data</div>; 
    return (
    <div> 
     {data ? dataDiv : ''} 
    </div> 
) 
} 

Но если изменить текст «некоторые данные» с переменной, то HTML внутри dataDiv не отображается нормально, но, как чистый текст:

const Footer =() => { 
    let data = 'Some data'; 
    let dataDiv = <div>Data is: {data}</div>; 
    return (
    <div> 
     {data ? dataDiv : ''} 
    </div> 
) 
} 

у меня есть много различных свойств данных, которые я хочу, чтобы показать или скрыть в зависимости, если он присутствует или нет, как я могу решить эту проблему в React хорошим способом?

Answer 1

Это действительный синтаксис и работает отлично, однако несколько вещей, чтобы помочь его очистить.

Во-первых, я рекомендовал бы, когда вы планируете использовать что-то, как логическое значение использовать Boolean()

Во-вторых, я бы рекомендовал вам вернуться null вместо пустой строки в методе визуализации.

В-третьих, поскольку вы используете синтаксис функции ES6, вы можете использовать шаблонные литералы для строк.

const Footer =() => { 
    let data = 'Some data'; 
    let dataDiv = <div>`Data is: ${data}`</div>; 
    return (
    <div> 
     {Boolean(data) ? dataDiv : null} 
    </div> 
) 
}