如何在反应列表中隐藏特定元素？

Question

我想隐藏反应列表中的特定元素。

状态如下：

 this.state = {
    lgShow: false,
    list: [ 
      { id:1, hidden: true },
      { id:2, hidden: true }
    ]
  };

这是组件的样子：

  props.list.map( result => (
     <button onClick={toggle(result.id)}> Hide </button>
     { result.hidden && <div id={result.id}> .... </div>  }
  ))

我想编写函数切换来搜索App.js中的id并更改该id的隐藏值，就像这样（虽然在这种情况下我不能设置setState（））。

 let toggle = id => {
    this.state.list.filter( val=>val.id===id ? val.hidden=!val.hidden )
 }

Answer 1

let toggle = id => {
  let newList = list.map(val => val.id === id ? { id: val.id, hidden: !val.hidden} : val);
  this.setState({list: newList})
}

你可以在里面切换到setState()

Answer 2

你需要使用setState方法来更新list的状态，这是在react中更新DOM的唯一方法。每次状态/道具只改变时，DOM将重新渲染。这就是React的工作原理。

我更新了toggle函数，它现在迭代list数组，并切换id param中传递的toggle(id)隐藏标志。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      lgShow: false,
      list: [ 
        { id:1, hidden: true },
        { id:2, hidden: true }
      ],
    };
  } // end of constructor
  
  toggle = (id) => {
    const list = this.state.list.map(item => {
      if (item.id === id) {
        return { ...item, hidden: !item.hidden }; 
      }
      return item;
    })
    this.setState({ list })
  } // end of toggle
  
  render() {
    return (
      <div>
        {list.map( result => (
          <>
            <button onClick={() => toggle(result.id)}> Hide </button>
            {result.hidden && <div id={result.id}>....</div>}
          </>
        ))}
      </div>
    );
  }
}

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

P.S：我没有运行这个代码，只是在记事本上干了一圈。