React renders DOM ternary expressions in multiple ternary expressions

​

I wanted to make a further judgment after I judged it to be equal to 4, and then render three DOM structures, but found that I could only write one, and I would report an error if I wrote too many.

​

I tried to solve the problem, but I found that the following two lines of DOM structure were not rendered

​

And then I came up with the idea of using an array, and I just separated it by commas.

{ recordField.fieldType == 4 ? ([ recordField.startLableName ? <span>{'"'+recordField.startLableName+'"'}</span> : null, recordField.endLableName ? <span>{'"'+recordField.endLableName+'"'}</span> : null, recordField.longLableName ? <span>{'"'+recordField.longLableName+'"'}</span> : null ]) : <span>{'"'+recordField.lableName+'"'}</span> }Copy the code

​