我如何根据状态渲染组件

Question

我已经从MaterialUI获取了这个过滤器图标，并且当检查复选标记时，我需要它填充黑色（现在可以改变位置）。当一个框被选中时，setFilters 被填充。因此，如果选中产品类型的检查，则 setFilters(prt:[]) 不会为空。

如何设置以便如果 setFilters(prt:[]) 不为空，我可以用不同的位置渲染过滤器图标（最终我会渲染一个不同的图标）。

我已经试过了

 { props.filters > 0 && d.autoFilter ?
    <FiFilter   style={{position:"relative", top:"4px", left: "12px"}} onClick={() => props.toggleVisibleFilter(d.field)}/>:<div/>}

// component A

  const [filters, setFilters] = useState({search:'',prt:[],cnt:[],cat:[]})

 
 // Component B
 
 
   const headerFields = [
    {field: 'ID', label: '', width: '5%'},
  {field: 'bnd', label: 'Brand', width: '15%'  } ,
  {field: 'cnt', label: 'Country', autoFilter: true, width: '15%' } ,
  {field: 'prt', label: 'Product type', autoFilter: true, width: '20%' } ,
  {field: 'cat', label: 'Category', autoFilter: true, width: '20%' } ,
  {field: 'url', label: 'URL', width: '25%' } ,
  ]

  
 // JSX
 
 <TableRow>
{headerFields.map((d)=>
  <TableCell 
    classes={{
      root:classes.root
    }}
   style={{ textAlign:"left",fontSize:"18px", position:"sticky", width:d.width, background:"#F28808"}}  align="left">{d.label}
  
  {  d.autoFilter ?
    <FiFilter   style={{position:"relative", top:"4px", left: "4px"}} onClick={() => props.toggleVisibleFilter(d.field)}/>:<div/>}
    {props.visibleFilter===d.field?<MultiSelectFIlter  filterHandler={props.filterHandler}  API_DATA={props.API_DATA} visibleFilter={props.visibleFilter} setVisibleFilter={props.setVisibleFilter} setFilters={props.setFilters} filters={props.filters} />:(null)}
    </TableCell>
)}

          </TableRow>

Answer 1

你可以像这样使用条件方法

style={`${filters==[]} ? {display:"none"} : {display:"block"} `}

Answer 2

根据您的上述条件，您有错误。因为当您检查数组是否为空时，您必须检查它的长度，而不仅仅是 props.filters 而是 props.filters.length 以使条件起作用，否则当数组已定义且长度为 0 props.filters 将始终返回 true；

也因为在您的情况下，您已将其定义为：

 const [filters, setFilters] = useState({search:'',prt:[],cnt:[],cat:[]})

你的条件应该是这样的：

{ props.filters.prt.length > 0 ? ...