在.map中添加父div

有什么辦法可以包含包裝div和FilterListContainer本身？FilterListScrollFilterListmap

因此，如果有什么要map添加的，它將添加父 div。如果不是它不會。

 <FilterListContainer>
      <FilterListScroll>
           <FilterList>
              {Object.keys(this.props.body_search_filter)
                .map((k) => (
                  <SidebarFilter
                    key={k}
                    type={k}
                    filter={this.props.body_search_filter[k]}
                    handleChange={this.handleFilterChange}
                  />
                ))
                .filter(
                  (i) =>
                    i.props.filter.list.length > 0 &&
                    ((!i.props.filter.optional && !i.props.filter.hidden) ||
                      (i.props.filter.list.length !== 1 &&
                        !i.props.filter.list[0].disabled))
           </FilterList>
      </FilterListScroll>
 </FilterListContainer>

uj5u.com熱心網友回復：

您將能夠在此處使用邏輯運算子的短路：

{Object.keys(this.props.body_search_filter).length && (
  <FilterListContainer>
      <FilterListScroll>
           <FilterList>
              {Object.keys(this.props.body_search_filter)
                .map((k) => (
                  <SidebarFilter
                    key={k}
                    type={k}
                    filter={this.props.body_search_filter[k]}
                    handleChange={this.handleFilterChange}
                  />
                ))
                .filter(
                  (i) =>
                    i.props.filter.list.length > 0 &&
                    ((!i.props.filter.optional && !i.props.filter.hidden) ||
                      (i.props.filter.list.length !== 1 &&
                        !i.props.filter.list[0].disabled))
           </FilterList>
      </FilterListScroll>
  </FilterListContainer>
)}

但是您可能想要過濾串列，然后檢查過濾后的串列是否包含任何元素：

const filtered = Object.keys(this.props.body_search_filter).filter((k) => {
    const f = this.props.body_search_filter[k];

    return f.list.length > 0 && 
        ((!f.optional && !f.hidden) ||
            (f.list.length !== 1 && !f.list[0].disabled))
});

// ...

// then use 'filtered' instead

{filtered.length && (
  <FilterListContainer>
      <FilterListScroll>
           <FilterList>
              {filtered.map((k) => (
                  <SidebarFilter
                    key={k}
                    type={k}
                    filter={this.props.body_search_filter[k]}
                    handleChange={this.handleFilterChange}
                  />
              ))}
           </FilterList>
      </FilterListScroll>
  </FilterListContainer>
)}

uj5u.com熱心網友回復：

_{將我的評論移至答案以添加片段}

你可以map在return. 然后你可以'檢查'是否map有一些內容，如果有，使用它，否則，不要渲染（或使用后備）

請看代碼中的注釋

const { useState } = React;

const Example = () => {

    // Demo data
    const [data, setData] = useState([ 'foo', 'bar' ])

    // Filter   Mapping logic
    const mapped = data
      .filter(d => d !== 'foobar')
      .map(d => <li>{d.toUpperCase()}</li>);
    
    // Content based on map, use it, or render 'null'
    // The wrapped 'ul' is OP's FilterListContainer as an example
    const content = !mapped.length ? null :
      (
        <div>
          <ul>
            {mapped}
          </ul>
        </div>           
    );
    
    // Render
    return content;
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

標籤：javascript 反应

上一篇：如何選擇多個塊的每個第一項（html，javascript）

下一篇：多個幻燈片容器