在JSX中编写简单条件的最佳方法是什么？

Question

在我的jsx

中

<div>{person.age}</div>

我希望仅在此人年龄为50岁或以上时显示如下

<div className="red-text">{person.age}</div>

要做到这一点，我把var let olderPerson = person.age > 50;然后做了

{
    olderPerson ? (
        <div className="red-text">{person.age }</div>
    ) : (<div >{person.age }</div>)
}

LMK如果这样做的正确方法

Answer 1

是的，没错。

        {
        olderPerson ?
            <div className="red-text">{person.age }</div> :
            <div >{person.age }</div>
        }

在这种情况下，您还可以使classname成为条件。

        {
        <div className={olderPerson && "red-text"}>
            {person.age }
        </div>
        }

Answer 2

例如：

https://jsfiddle.net/enf2q4eg/

年龄通过Example组件中的道具传递。