时间戳

首页 > 解决方案 > 如何在 React 中标记要渲染的子实例

javascript - 如何在 React 中标记要渲染的子实例

问题描述

在这种情况下，标记孩子实例的最佳方法是什么？返回中的我的孩子与按钮一起在 Array.map() 循环内。当我按下按钮显示 tge child 时，所有的副本都会显示出来。我怎样才能让特定的孩子展示？

state = {
        isLoading: true,
        team: [],
        error: null,
        isHidden: true
      }
    toggleHidden () {
      this.setState({
        isHidden: !this.state.isHidden
      })
    }

地图内部： 

 <span class="arrow" onClick={this.toggleHidden.bind(this)}>click</span>
                        {!this.state.isHidden && <p>{s.description}</p>}

标签： javascriptreactjs

解决方案

在您正在映射的数组中（我假设它的团队）拥有visibility和的属性id。然后将要更改其状态的孩子的 id 传递给切换功能。

class Comp extends React.Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
      team: [
        { description: "hi", id: 0, isHidden: false },
        { description: "bye", id: 1, isHidden: false }
      ],
      error: null,
      isHidden: true
    };
    this.toggleHidden = this.toggleHidden.bind(this);
  }

  toggleHidden(id) {
    let temp = Array(...this.state.team);
    let item = temp.find(t => t.id === id);
    item.isHidden = !item.isHidden;
    this.setState({
      team: temp
    });
  }

  render() {
    return this.state.team.map(s => (
      <span>
        <span class="arrow" onClick={() => this.toggleHidden(s.id)}>
          click
        </span>
        <p>{s.isHidden && s.description}</p>
      </span>
    ));
  }
}

在 CodeSandBox 上查看

推荐阅读