我在哪里可以在React类中编写条件语句？

Question

我必须写一个有条件的陈述，以使一定百分比的价值绿色，如果其正红色为阴性，则为绿色。但是我不确定在哪里编写此条件语句。

<div>
{this.state.tableData.map((row, index)=>{
return(

<Box component="span" sx={{}}>
<Grid > {row.data.direction}</Grid>
<Grid > ({row.data.marketD}%) today </Grid>
</Box>

)
})}
</div>

我需要制作row.data.marketd显示颜色。

color: {row.data.marketD}<0 ? 'red':'green'.

但是我不知道要在哪个标签中包含此条件。任何帮助都将受到赞赏。

Answer 1

将答案视为一个概念。您的UI库可能会提供另一种方式。

<span style={{color:row.data.MarketD<0 ? 'red' : 'green'}}>{row.data.marketD}</span>

Answer 2

所有条件陈述都应在实践的正方形内。

{row.data.marketD < 0 ? 'red':'green' }

Answer 3

另一种方法是将文本包裹在版式组件中，并根据条件更改颜色属性。通过这种方式，您将文本与grid的其余内容内容隔离开来（它不会影响今天旁边的文本）：

<Typography color={row.data.MarketD<0 ? 'red' : 'green'}>
    Your text here
</Typography>