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;

这是Modal组件：

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/sa@adorable.io.png" 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的帖子：）

使用onclick按钮在<ul>内部渲染多个React组件

0 个答案: