反应：将组件追加到DOM

Question

我通过映射通过JSON对象来呈现React中的组件。我现在想要将这些组件添加到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/> 
    ) 
}