javascript - react :将组件附加到DOM

我正在通过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>
    );
  }
}

最佳答案

首先，您需要调整渲染方法。您需要映射到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/>
    )
}