Javascript 是否可以在React中的inline If Else中呈现JSX组件（无论是表还是跨度）？

我目前正试图在内联If-Else条件中呈现一个JSX表，它将从一个const接收数据，确认API已加载。通过加载，它将显示包含所有数据的表或范围。代码如下：

<div>
...

  <span className = {apiloaded === true ? 'show_info' : 'dontshow_info'}>
     <h4>
     Tracking data: 
     </h4>
  </span>

  {apiloaded === true ? end.events.forEach(item => { 
   {console.log(apiloaded)}
                            
   <span> {item.data} </span>

  }) : error }

</div>

...
跟踪数据：
{apiloadded==true？end.events.forEach（项=>{
{console.log（apiloadded）}
{item.data}
})：error}

api被正确调用，因为控制台日志显示了6次

showtd

但是这张桌子拒绝装货。甚至可以在这个条件下呈现表吗，或者问题是

forEach

---

下面的解决方案。

这里的问题不是条件运算符

---

有些语言你可以在“编程”和“写作”中进进出出。PHP就是一个典型的例子：

<p>This gets written to the output</p>
<?php 
    # This is some code
?>

const-App=（）=>{
const[tableData，setTableData]=useState（[]）；
useffect（（）=>{
//获取api响应
可设置数据（数据）；
}, [])
返回(
{tableData.length>0？
.....
//环路
{tableData.map（（数据，i）=>(
{data.yourkeyName}
))}
:
没有发现任何记录

}
);
}

这应该行得通。您需要将

.forEach

更改为

.map

并

返回新值

 {
    showtd ? end.eventos.map((item) => {
          {
            console.log(showtd);
          }
          return <span> {item.data} </span>;
        })
      : error;
  } 

{
showtd？end.eventos.map（（项目）=>{
{
console.log（showtd）；
}
返回{item.data}；
})
：错误；
} 
传递给forEach的函数不会返回任何内容。这可能就是你什么都看不到的原因。
{showtd==true？end.eventos.map（item=>{{console.log（showtd）}return（{item.data}）；}）：error}
正如@FelixKling所想的那样，这段代码会起作用。我已经编辑并试图澄清一下我的代码。此函数（apiloaded）在此代码段上方的其他实例上返回true。为什么它不在那一部分这样做呢？
return <p>{"Hello"}</p>

const data = "Hello";
return <p>{data}</p>

const generateData = () => {
    return "Hello";
};
return <p>{generateData()}</p>

const data = ["foo", "bar"];
return <p>{data.map( element => <span>{element}</span> )}</p>

const App = () => {
    const [tableData, setTableData] = useState([]);
    
    useEffect(() => {
        // get api response 
        setTableData(data);
        
    }, [])

    return(
        <>
            {tableData.length > 0 ?
                <table>
                    <tr><th>.....</th></tr>
                    // Loop
                    {tableData.map((data,i) => (
                        <tr key={i}>
                            <td>{data.yourkeyName}</td>
                        </tr>
                    ))}
                </table>
            :
                <p>No records found</p>
            }
        </>
    );
}

 {
    showtd ? end.eventos.map((item) => {
          {
            console.log(showtd);
          }
          return <span> {item.data} </span>;
        })
      : error;
  }