在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>";