React - .map inside ternary (jsx)

Question

我对此有点纠结。我需要使用.map从特定的数组( dataSource )创建一个下拉列表，但是如果三元条件为真，则需要dataSource中的选项+另一个选项。

我试过了，但不能渲染

         <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}
          />
        ))
      )}

您的代码的第一个问题是，您的map函数实际上不返回任何内容，因此不会呈现其中的内容。通过去掉大括号，您隐式地添加了一条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}
         />
       )
      })}