Кнопка Chip не отображается при создании условного метода рендеринга - PullRequest
Новая
       3

Кнопка Chip не отображается при создании условного метода рендеринга

0 голосов
/ 27 декабря 2018

Я пытаюсь визуализировать конкретную кнопку фишки, основываясь на том, нажата она или нет.Для этого я установил переменную в состоянии компонента, которая содержит все свойства кнопки.Однако мои операторы if внутри метода render не отображают кнопки.Однако, когда я помещаю его вне оператора if, он работает.

Каждый элемент переменной состояния столбца является состоянием кнопки микросхемы

Чтобы попытаться заставить его работать, я использовал этот код при рендеринге.(): 

 {
    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)
    )
   }));
}

Я ожидал, что кнопка чипа будет отображаться на экране независимо от свойства show, однакос различными стилями дизайна, применяемыми материалом UI.Если бы показ был истина кнопка чипа показала бы иначе, чем если бы это было ложь .Прямо сейчас он не показывает кнопку чипа, что когда-либо.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

То, как вы используете find в рендере, неверно.Find только возвращает элемент, который удовлетворяет условию.

например, 

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

Использовать карту вместо 

 this.state.columns.map(item => {
   if (item.id === '1'){
     return (<div> Inside </div>)
   }
 })
0 голосов
/ 27 декабря 2018

Целое 

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

передается в качестве третьего субъекта троичного оператора при условии 

item.show === true

, поэтому на <Chip /> видимость в настоящее время влияет show свойство.

...