React: Добавить компоненты в DOM

Question

Я обрабатываю компоненты в React путем сопоставления через объект JSON. Теперь я хочу добавить эти компоненты в dom. Как я могу выбрать каждый из этих компонентов и добавить их в DOM?

Все обычные методы jQuery не работают.

{dataobj.items.map((instance) => { 

     return (
      <div key={instance.title} className="new"> 
      <Event time={parseInt(instance.start_time)} title={instance.title} start_time={instance.start_time} location={instance.location} /> 
      </div> 
     ) 


})} 

---

import AltContainer from 'alt-container'; 
import React from 'react'; 
import { Link } from 'react-router'; 
import moment from 'moment'; 
import Event from './Event.jsx'; 
const classNames = require('classnames'); 
const ReactDOM = require('react-dom') 


export default class Calendar extends React.Component { 

    constructor(props) { 
    super(props); 



    this.state = { 

    } 
} 

    componentDidMount() { 
    ReactDOM.findDOMNode(this) 
    console.log(this); 
    $('#nine').append($('new')) 
    } 

    render() { 

    var timeStamp = function() { 
    var datafile = require("json!./data.json"); 

    {datafile.items.map(function(instance) { 
     const timeElement= parseInt(instance.start_time); 
     console.log(timeElement); 
     return timeElement 
    })} 
} 
    var dataobj = require("json!./data.json"); 


    return (
     <div className="calendar"> 
     <div className="amContainer"> 
     <div className="amSide">AM</div> 
     <div className="linesContainer"> 
      <div className="hourBlock"> 
       <div id="nine" className="time"> 
       </div> 
       <div className="halfHour"> 
       {moment().format('9:30')} 
       </div> 
      </div> 
      <div className="hourBlock"> 
      <div className="time"> 
      {moment().format('10:00')} 
      </div> 
      <div className="halfHour"> 
       {moment().format('10:30')} 
      </div> 
      </div> 
      <div className="hourBlock"> 
      <div className="time"> 
      {moment().format('11:00')} 
      </div> 
      <div className="halfHour"> 
       {moment().format('11:30')} 
      </div> 
      </div> 
     </div> 
     </div> 

      {dataobj.items.map((instance) => { 


     return (
      <div key={instance.title} className="new"> 
      <Event time={parseInt(instance.start_time)} title={instance.title} start_time={instance.start_time} location={instance.location} /> 
      </div> 
     ) 



})} 


     </div> 
    ); 
    } 
} 

Answer 1

Во-первых, вам нужно настроить метод визуализации. Вы должны карту над dataObject, установите его в переменной, в данном случае я называю это objects, а затем использовать его в jsx у вас уже есть, как {objects} как ребенок, как так:

render() { 
// your render logic 
var objects = dataobj.items.map((instance) => { 
     return (
      <div key={instance.title} className="new"> 
      <Event 
      time={parseInt(instance.start_time)} 
      title={instance.title} 
      start_time={instance.start_time} 
      location={instance.location} 
      /> 
      </div> 
     ) 

    return (
    <ExampleComponent> 
    // your main html should go here this is just a simple example 
     {objects} 
    <ExampleComponent/> 
    ) 
}