javascript - 在内部渲染多个反应组件带按钮 onclick

Question

我是 React 的新手，刚开始学习，我遇到了一个我似乎找不到解决方案的问题。

我正在尝试通过单击模式中的按钮来呈现反应组件。目前它只正确渲染一个元素，（因为根，我知道，但我不知道要改变什么）。我希望应用程序能够呈现尽可能多的组件，就像用户单击添加按钮的次数一样（它们现在将完全相同，我知道，我只想看到更多组件在同一个 .

这是我的 ContactList 组件：

import React, { Component } from "react";
import ContactItem from "./ContactItem";
import "./App.css";

class ContactsList extends Component {
   render() {
      return (
         <ul className="list-group list-group-flush container">
            <ContactItem login="typeofweb1" name="Lena" department="JavaScript Developer" border="0" />
            <ContactItem login="typeofweb2" name="Brian" department="Human Resources" />
            <ContactItem login="typeofweb3" name="Rick" department="QA" />
            <div id="addContactRoot" />
         </ul>
      );
   }
}

export default ContactsList;

ContactItem 组件：

import React, { Component } from "react";
import "./App.css";

class ContactItem extends Component {
   constructor(props) {
      super(props);
      this.state = {
         counter: 0,
         totalClicks: 0
      };
   }

   render() {
      const imgUrl = `https://api.adorable.io/avatars/55/${this.props.login}.png`;
      return (
         <li className="list-group-item" style={{ padding: "8px", borderTop: this.props.border }}>
            <img src={imgUrl} width="36" height="36" style={{ borderRadius: "5px", float: "left" }} alt="Avatar" />
            <div style={{ float: "left", marginLeft: "10px" }}>
               <p className="font-weight-bold" style={{ fontSize: "15px", marginBottom: "-10px" }}>
                  {this.props.name}
               </p>
               <span style={{ fontSize: "12px" }}>{this.props.department}</span>
               <span className="buttons">
                  <button onClick={this.handleIncrement} className="badge badge-warning counter-badge">
                     +
                  </button>
                  <span className="badge badge-primary counter-badge">Score: {this.state.counter}</span>
                  <span className="badge badge-danger counter-badge">Total clicks: {this.state.totalClicks}</span>
                  <button onClick={this.handleDecrement} className="badge badge-warning counter-badge">
                     -
                  </button>
               </span>
            </div>
         </li>
      );
   }

   handleIncrement = () => {
      this.setState({ counter: this.state.counter + 1 });
      this.setState({ totalClicks: this.state.totalClicks + 1 });
   };
   handleDecrement = () => {
      this.setState({ counter: this.state.counter - 1 });
      this.setState({ totalClicks: this.state.totalClicks + 1 });
   };
}

export default ContactItem;

这是模态组件：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ContactItem from "./ContactItem";
import "./App.css";

class Modal extends Component {
   render() {
      return (
         <div>
            <button type="button" className="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">
               Add
            </button>
            <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
               <div className="modal-dialog" role="document">
                  <div className="modal-content">
                     <div className="modal-header">
                        <h5 className="modal-title" id="exampleModalLabel">
                           Add contact <i className="fas fa-plus" />
                        </h5>
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div className="modal-body">
                        <div>
                           <img src="https://api.adorable.io/avatars/40/[e-mail]" style={{ borderRadius: "5px" }} />
                        </div>
                        <div className="input-group mb-3">
                           <input type="text" className="form-control" placeholder="Name" />
                        </div>
                        <div className="input-group mb-3">
                           <input type="text" className="form-control" placeholder="Department" />
                        </div>
                     </div>
                     <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" data-dismiss="modal">
                           Close
                        </button>
                        <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.handleOnClick}>
                           Add
                        </button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      );
   }

   handleOnClick = () => {
      ReactDOM.render(<ContactItem login="typeofweb3" name="John" department="Office" />, document.getElementById("addContactRoot"));
   };
}

export default Modal;

onclick 有一个“添加”按钮，当用户单击按钮时，我想在 ContactList 组件中呈现新的 ContactItem 组件。但是我希望能够呈现多个 ContactItem 组件，如果我单击一次添加按钮，然后再单击一次。

抱歉，如果我没有很好地描述问题，或者我写错了帖子，这是我第一次在 stackoverflow 上发帖 :)

标签： javascriptreactjscomponents