如何在反应组件中编写 If 语句？

Question

I am new to react and I am using a carbon react library I am just wondering how can I put an if statement in map function.

It just writes the if statement in like it is normal string.

<StructuredListBody>
{matchingResults?.map((X, i) =>
<StructuredListRow}>
{if (X?.status.includes(Working)){
<StructuredListCell>{X?.status}</StructuredListCell>}
else 
{<StructuredListCell>{X?.checking}</StructuredListCell>}};
</StructuredListRow>
)}
</StructuredListBody>

--- additional information I simplified the code but I am looking at cant use a ternary operator because there will be more than 2 conditions.

It is more like this I still don't get how to return a specific component in a component. I am trying to change the color. The only thing that came to mind is to use the same again

    <StructuredListBody>
    {matchingResults?.map((X, i) =>
    <StructuredListRow key={`row-${row.id} -${i}`}>
    if (X?.status.includes(Working) {                                                
  <StructuredListCell key={`cell-${row.id}} noWrap style={{paddingBottom: '.5rem', color: 'red'}}>
    {X?.status}
    </StructuredListCell>}
    else 
    {<StructuredListCell key={`cell-${row.id} noWrap style={{paddingBottom: '.5rem', color: 'yellow'}}>
    {X?.status}
    </StructuredListCell>}
     )}
     </StructuredListBody>
 

Answer 1

As the only difference in rendering is the content in the StructuredListCell component. The easiest way for your case would be to use the ternary operator (?), additionally the key props need to be unique, I used the index here, but you should use something unique in your data structure.

        <StructuredListBody>
            {matchingResults.map((X, i) => (
                <StructuredListRow key={i}>
                    <StructuredListCell>{X?.status.includes(Working) ? X?.status : X?.checking}</StructuredListCell>
                </StructuredListRow>
            ))}
        </StructuredListBody>

Read more about Conditional Rendering in React

Answer 2

There are a couple of ways to have if statements in the render part of a react component. You can conditionally render different components based on some logic like below:

<StructuredListBody>
    {matchingResults?.map((X, i) => {
        if (X?.status.includes(Working)) {
            return (
                <StructuredListRow>
                    <StructuredListCell>{X?.status}</StructuredListCell>
                </StructuredListRow>
            );
        } else {
            return (
                <StructuredListCell>{X?.checking}</StructuredListCell>
            );
        }
    })}
</StructuredListBody>

OR you could do the logic inside the component:

<StructuredListBody>
    {matchingResults?.map((X, i) => (
        <StructuredListCell>
            {X?.status.includes(Working) ? X?.status : X?.checking}
        </StructuredListCell>
    ))}
</StructuredListBody>