1

我正在使用 React 和CSSTransitionGroupmembers组件在我的应用程序状态的两组之间切换。它的状态包含members，每个都有一个标志来表明它们是否是 not 的真正成员。它还包含一个标志来跟踪我们正在查看的成员类型：

this.state = {
      viewMembers: true,
      members: [
        {
          id: 1,
          name: "Jim",
          isMember: true
        },
        {
          id: 2,
          name: "John",
          isMember: false
        }
    ]
}

在我的render函数中，我映射了这个数组，并且只显示与视图状态相对应的成员（即如果viewMembers是true，我只显示成员在哪里isMember，true反之亦然）。对于每个成员，我返回一张表<tr>。该map函数被包装在一个CSSTransitionGroup标签中以淡入表格行。这一切都很好 - 请在此处查看工作代码：jsfiddle.net/d9cfh4zg/1/。

我的问题是它目前在淡出旧状态之前在新状态中淡出，给它带来了轻微的质量问题。如何让现有行在淡入新行之前淡出？

4

1 回答 1

0

尝试这个：

const styles = {
    fontFamily: "sans-serif"
  };

  const CSSTransitionGroup = React.addons.CSSTransitionGroup;

  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        viewMembers: true,
        members: [
          {
            id: 1,
            name: "Jim",
            isMember: true
          },
          {
            id: 2,
            name: "John",
            isMember: false
          },
          {
            id: 3,
            name: "Sarah",
            isMember: false
          },
          {
            id: 4,
            name: "Mary",
            isMember: true
          }
        ]
      };
        this.refreshState = true;
    }

    changeViewState(state) {
      this.refreshState = false;
      setTimeout(() => {

        if (state === "members") {
          this.setState({ viewMembers: true });
          if(!this.refreshState)
          {
           this.changeViewState(state);
           this.refreshState = true;
           }
        } else {
          this.setState({ viewMembers: false });
          if(!this.refreshState)
          {
            this.changeViewState(state);
            this.refreshState = true;
           }
        }
      }, 500);

    }
    render() {
      return (
        <div style={styles}>
          <h4>Members</h4>
          <ul>
            <li onClick={() => this.changeViewState("members")}>View Members</li>
            <li onClick={() => this.changeViewState("non-members")}>
              View Non-members
            </li>
          </ul>
          <MembersTable
            viewMembers={this.state.viewMembers}
            members={this.state.members}
            refreshState = {this.refreshState}

          />
        </div>
      );
    }
  }

  const MembersTable = (props) =>
    <table>
      <thead>
        <tr>
          <td>
            <strong>Id</strong>
          </td>
          <td>
            <strong>Name</strong>
          </td>
        </tr>
      </thead>
      <CSSTransitionGroup
                component="tbody"
                transitionName="fade"
                transitionAppear={true}
                transitionAppearTimeout={500}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}
                >
        {props.members.map(member => {
          if (
            (props.viewMembers && member.isMember && props.refreshState) ||
            (!props.viewMembers && !member.isMember && props.refreshState)
          ) {
            return (
              <tr key={member.id}>
                <td>
                  {member.id}
                </td>
                <td>
                  {member.name}
                </td>
              </tr>
            );
          }
        })}
        </CSSTransitionGroup>
    </table>;

  ReactDOM.render(<App />, document.getElementById("root"));

我添加了一个refreshState变量并在setTimeout函数中添加的回调函数中对其进行了更新changeViewState。

这是更新的小提琴

希望这可以帮助。

于 2017-08-29T19:27:27.083 回答