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/> ) }像这样的孩子：

$variationDetails = wc_get_product($variation_id);
$variationDetails->get_formatted_name();

React：将组件附加到DOM

1 个答案: