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

我在另一个组件中重复使用了两次聊天组件。当您单击聊天按钮时，它会显示出来，但它彼此重叠

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应隐藏。

基本上，您需要为每个聊天室组件提供一个标识符，并跟踪当前打开的组件

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

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

工作流程：

用户单击其中一个聊天按钮，触发HandleOpean，然后我们 传入唯一标识符。。。。 它被传递回父级，现在是currentChatId 应使用标识符更新。。。 该currentChatId作为 当前聊天ID属性。。。 触发所有聊天组件上的componentDidUpdate，然后我们检查 currentChatId与它们自己的标识符相对应，将只显示一个标识符 匹配，所以我们显示那个。

---

参见codesandbox了解工作示例：

您需要在更高的组件中移动一些逻辑。父组件是什么样子的？@ChristophenGo我没有父组件。我的意思是，使用Chat两次的组件。我只是将其包含到其他组件中，就像这样，

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