Question

我正在尝试根据是否单击某个特定的芯片按钮来渲染它。为此，我在组件状态上设置了一个变量，该变量包含所有按钮属性。但是，我的render方法中的if语句未显示按钮。但是，当我将它放在if语句之外时，它就可以工作。

列状态变量的每个元素都是芯片按钮状态

为使其正常工作，我在render（）上使用了以下代码：

 {
    this.state.columns.find(item => {
       if (item.id === '1'){
         return item.show === true ? (
              <Grid item className={classes.chipWrapper}>
               <Chip
               label='Chip 1'
               color="secondary"
               deleteIcon={<DoneIcon />} 
               id='1'
               onClick={this.handleChip}
               />
             </Grid>
              ) : (
             <Grid item className={classes.chipWrapper}>
               <Chip
               label='Chip 1'
               color="secondary"
               deleteIcon={<DoneIcon />} 
               id='1'
               onClick={this.handleChip}
               />
             </Grid>
         )
       }
    })
  }

这是我在其余代码中所拥有的：

class ChipFilter extends React.Component {
  state = {
    anchorEl: null,
    columns: [
      {id: "1", show: false}
    ]
 };

//simply change the property "show" of the column chosen
handleChip = (e) => {
    this.setState(prevState => ({
      columns: prevState.columns.map(
      obj => (obj._id === e.currentTarget.id ? Object.assign(obj, { show: true }) : obj)
    )
   }));
}

我希望芯片按钮无论显示属性如何都可以在屏幕上显示，但是材料ui应用了不同的设计样式。如果show为 true ，则芯片按钮的显示将与 false 时不同。目前，它没有显示芯片按钮。

Answer 1

您在渲染中使用查找的方式不正确。查找只是返回符合条件的项目。

例如

-Wall

改为使用地图

 var found = items.find(function(item) {
   return item > 10;
 })

Answer 2

整个

 <Grid item className={classes.chipWrapper}>
               <Chip
               label='Chip 1'
               color="secondary"
               deleteIcon={<DoneIcon />} 
               id='1'
               onClick={this.handleChip}
               />
 </Grid>

作为条件的三元运算符的第三个主题通过

item.show === true

因此<Chip />的可见性当前受 show 属性的影响。

创建条件内部渲染方法时未显示“芯片按钮”

2 个答案: