在React组件中动态创建元素

Question

我创建了一个辅助函数，当我单击按钮时，它会在我的组件中动态地创建元素。但它不显示一半的HTML我试图追加到父div。

它正确地添加了标签为html，但其余的只是纯文本。任何人都能看到为什么

用于动态创建内容的功能：

function addElement(parentId, elementTag, elementId, html) { 
    let parentElement = document.getElementById(parentId); 
    let elementToAdd = document.createElement(elementTag); 
    elementToAdd.setAttribute('id', elementId); 
    elementToAdd.innerHTML = html; 
    parentElement.appendChild(elementToAdd); 
} 

我的我的组件内功能：

static addMatch() { 
    let html = "<div className=\"form-group\"><label className=\"control-label\">Add Match</label>" + 
     "<DatePickerselected={this.state.startDate}onChange={this.handleChange.bind(this)}/></div>"; 
    addElement('fixture-parent', 'newMatch', uuid(), html); 
} 

我完全反应成份低于：

import React, {Component} from "react"; 
import DatePicker from "react-datepicker"; 
import {addElement} from "../../helpers/DynamicElementsHelper"; 
import moment from "moment"; 
const uuid = require('uuid/v1'); 

require('react-datepicker/dist/react-datepicker.css'); 

class Fixtures extends Component { 

    constructor() { 
     super(); 
     Fixtures.addMatch = Fixtures.addMatch.bind(this); 
     this.state = { 
      startDate: moment() 
     }; 
    } 

    handleChange(date) { 
     this.setState({ 
      startDate: date 
     }); 
    } 

    static addMatch() { 
     let html = "<div className=\"form-group\"><label className=\"control-label\">Add Match</label>" + 
      "<DatePicker selected={this.state.startDate} onChange={this.handleChange.bind(this)} /></div>"; 
     addElement('fixture-parent', 'newMatch', uuid(), html); 
    } 

    render() { 
     return (
      <div className="tray tray-center"> 
       <div className="row"> 
        <div className="col-md-8"> 
         <div className="panel mb25 mt5"> 
          <div className="panel-heading"> 
           <span className="panel-title">Fixtures</span> 
           <p>A list of fixtures currently on the system, pulled in via ajax from Ratpack</p> 
          </div> 
          <div className="panel-body p20 pb10"> 
           <div id="fixture-parent" className="form-horizontal"> 
            <div className="form-group"> 
             <label className="control-label">Add Match</label> 
             <DatePicker 
              selected={this.state.startDate} 
              onChange={this.handleChange.bind(this)}/> 
            </div> 
           </div> 
          </div> 
          <button onClick={Fixtures.addMatch }>Add Match</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

    } 

    export default Fixtures; 

Answer 1

在React中，建议不要直接与DOM交互。相反，您应该根据您拥有的数据修改JSX。为了您的代码，而不是与改变，你应该改变基础上，国家和显示信息的状态数据将HTML标记：

addMatch() { 
    //Add a start date to the list of starting dates 
    this.setState({ 
     listOfStartDates: [...this.state.listOfStartDates, newDate] 
    }); 
} 

render(){ 
    //For each starting date, generate a new 'match' as you called them 
    // note: this is the same as the stringyfied HTML tag OP had in the question 
    let listOfMatches = this.state.listOfStartDates.map((date)=>{ 
     return (
      <div className="form-group"> 
       <label className="control-label"> 
        Add Match 
       </label> 
       <DatePicker selected={date} onChange={this.handleChange.bind(this)} /> 
      </div> 
     ); 
    /* then in here your returned JSX would be just as OP originally had, with the exception that you would have {listOfMatches} where OP used to have the inserted list of HTML tags */ 
    return //... 
} 

由于该组件将重新渲染每次状态变化，该组件将始终拥有与开始日期一样多的匹配项。

希望有帮助！

Answer 2

把之间的空间DatePicker并选中。

"<DatePicker selected={this.state.startDate}onChange={this.handleChange.bind(this)}/></div>";