如何在reactjs中一次呈现一个可重用的组件？

Question

我两次将聊天组件重用到另一个组件中。它显示时，您单击聊天按钮，但它是重叠的。

class Chat extends React.Component {
        constructor() {
            super();
            this.state = {
                show: false, 
            };
        }
        reset = () => {
            this.setState(false);
        }
        open = () => { 
            this.setState({ show: true });
        }
        close = () => this.setState({ show: false });
        render() {
            return (<div className="chat">
                <button className="btn-yes round" onClick={this.open}>{this.props.title}</button>
                {this.state.show  && 
                <div className="show-chat">
                    <div className="chat-head">Now Chatting <i className="fas fa-angle-down" onClick={this.close}></i></div>
                    <div className="chat-body">
                        <div className="blue">Teresa wants to chat about her healthcare finances</div>
                        <ul>
                            <li><img src={agentPhoto} alt="chat agent avatar" /></li>
                            <li>
                                <h6>John Newman</h6>
                                <div className="gray">Hi Teresa!</div>
                                <div className="gray">Here is the <a href="/">link to the finance tool</a> we discussed.</div>
                                <div className="gray">If you have any questions, let me know!</div>
                            </li>
                        </ul>
                    </div>
                    <input placeholder="Type here and hit enter to chat"></input>
                </div>}
            </div>);
        }
    }

我希望一次只显示一个聊天。当我点击聊天按钮2和聊天1显示，聊天1应该是隐藏的。

Answer 1

本质上，您需要为每个Chat组件提供一个标识符，并跟踪当前打开的组件。

下面是父组件的基本结构：

class App extends React.Component {
  state = {
    currentChatId: null
  };

  handleOpen = id => {
    this.setState({
      currentChatId: id
    });
  };

  render() {
    return (
      <div>
        <Chat
          identifier={1}
          currentChatId={this.state.currentChatId}
          handleOpen={this.handleOpen}
        />
        <Chat
          identifier={2}
          currentChatId={this.state.currentChatId}
          handleOpen={this.handleOpen}
        />
      </div>
    );
  }
}

所以请注意，我们给每个Chat组件一个identifier支柱。我们将使用identifier来更新active chat --我们将其存储为一个在父状态下称为currentChatId的值。所有这些都是通过handleOpen()事件处理程序完成的，我们也将其作为Chat的支柱传递。

现在在您的Chat组件中，我们需要为open()和componentDidUpdate()配置逻辑

class Chat extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
  }

  componentDidUpdate(prevProps) {
    const { identifier, currentChatId } = this.props;

    if (this.props.currentChatId !== prevProps.currentChatId) {
      this.setState({
        show: identifier === currentChatId ? true : false
      });
    }
  }

  open = () => {
    const { identifier, handleOpen } = this.props;
    handleOpen(identifier);
  };
  render() {
    return (
      <div className="chat">
        <button className="btn-yes round" onClick={this.open}>
          {this.props.title}
        </button>
        {this.state.show && (
          <div className="show-chat">
            <div className="chat-head">
              Now Chatting{" "}
              <i className="fas fa-angle-down" onClick={this.close} />
            </div>
            <div className="chat-body">
              <div className="blue">
                Teresa wants to chat about her healthcare finances
              </div>
              <ul>
                <li>
                  <img src={""} alt="chat agent avatar" />
                </li>
                <li>
                  <h6>John Newman</h6>
                  <div className="gray">Hi Teresa!</div>
                  <div className="gray">
                    Here is the <a href="/">link to the finance tool</a> we
                    discussed.
                  </div>
                  <div className="gray">
                    If you have any questions, let me know!
                  </div>
                </li>
              </ul>
            </div>
            <input placeholder="Type here and hit enter to chat" />
          </div>
        )}
      </div>
    );
  }
}

工作流：

1. 用户点击一个聊天按钮，触发handleOpen()，我们传递唯一的identifier.
2. 它被传回给Parent，现在currentChatId应该用identifier更新.
3. currentChatId被传回聊天组件作为currentChatId的道具.
4. 在所有聊天组件上触发componentDidUpdate()，我们根据它们自己的标识符检查currentChatId，只有一个将匹配，所以我们显示那个。

有关工作示例，请参见代码框：https://codesandbox.io/s/react-example-kgm2h