反應：將組件附加到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}使用{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/>
    )
}