React - 三元内的 .map (jsx)

Question

我对此有点坚持。我需要使用 .map 从特定数据源（数组）创建下拉列表，但如果三元条件为真，则需要数据源中的选项 + 另一个选项。

我试过了，但它没有渲染

         <Dropdown
          key={dataSource}
          type="form"
          label=""
          primary="Select..."
          valid={validation.dataSource.isValid}
          message={validation.dataSource.message}
          className="query-type__datasource-dropdown"
          disabled={mode === 'view' || (dataSource === 'xde' && !showXDE)}
          onChange={(e, value) => { onChangeDatasource(value) }}

          (showXDE || dataSource === 'xde') ?
          {dataSources.map(dataSourceItem => {
            <DropdownItem
              key={dataSourceItem.id}
              value={dataSourceItem.id}
              primary={dataSourceItem.description}
              selected={dataSource === dataSourceItem.id}
            />
          })}
          <DropdownItem
            key="xde"
            value="xde"
            primary="XDE"
            selected={dataSource === 'xde'}
            />
          :
          {dataSources.map(dataSourceItem => {
            <DropdownItem
              key={dataSourceItem.id}
              value={dataSourceItem.id}
              primary={dataSourceItem.description}
              selected={dataSource === dataSourceItem.id}
            />
          })}
         </Dropdown>

编辑：为参考添加了其余的下拉信息

Answer 1

我认为您正在寻找这样的东西：

      {showXDE || dataSource === "xde" ? (
        <>
          {dataSources.map((dataSourceItem) => (
            <DropdownItem
              key={dataSourceItem.id}
              value={dataSourceItem.id}
              primary={dataSourceItem.description}
              selected={dataSource === dataSourceItem.id}
            />
          ))}
          <DropdownItem
            key="xde"
            value="xde"
            primary="XDE"
            selected={dataSource === "xde"}
          />
        </>
      ) : (
        dataSources.map((dataSourceItem) => (
          <DropdownItem
            key={dataSourceItem.id}
            value={dataSourceItem.id}
            primary={dataSourceItem.description}
            selected={dataSource === dataSourceItem.id}
          />
        ))
      )}

您的代码的第一个问题是您的地图函数实际上不返回任何内容，因此不会呈现其中的内容。通过删除花括号，您隐式添加了一个 return 语句。

另一个问题是你的第一个三元条件中的两个元素必须有一个父元素。即你不能有两个兄弟姐妹没有父母，这是你试图做的。添加<>...</> 可以解决这个问题。 <React.Fragment>...</React.Fragment> 是常用的。您也可以添加<div>...</div>，但这取决于您的样式。

Answer 2

问题是你没有从map返回组件：

(showXDE || dataSource === 'xde') ?
   {dataSources.map(dataSourceItem => {
     return(
       <DropdownItem
        key={dataSourceItem.id}
        value={dataSourceItem.id}
        primary={dataSourceItem.description}
        selected={dataSource === dataSourceItem.id}
       />
     )
    })}
    <DropdownItem
      key="xde"
      value="xde"
      primary="XDE"
      selected={dataSource === 'xde'}
     />
     :
     {dataSources.map(dataSourceItem => {
       return (
         <DropdownItem
          key={dataSourceItem.id}
          value={dataSourceItem.id}
          primary={dataSourceItem.description}
          selected={dataSource === dataSourceItem.id}
         />
       )
      })}