反应在轨道上，传递和格式化道具？

Question

我正试图将事件对象的集合向下传递到一个大日历组件中。我正在做一个例子，而且我非常接近--但我错过了一些东西。如果我用代码示例作进一步解释比较容易：

这里是道具从rails视图传入的地方。@events是一个事件对象数组。需要对事件进行格式化，以便在某个时候将它们显示在大日历中：

<%= react_component("CalendarApp",
                    props: @events,
                    prerender: false) %>

此组件将在以下代码段中传递给ReactOnRails.register：

import React from 'react';
import Calendar from '../containers/Calendar';

export default (props) => (
  <Calendar {...props} />
);

这里是rails视图中提供“CalendarApp”的地方：

import ReactOnRails from 'react-on-rails';
import CalendarApp from './CalendarAppClient';
ReactOnRails.register({ CalendarApp });

接下来，是Calendar容器/智能组件。console.log(this.props)在浏览器控制台中返回以下内容：

​

​

问题如何向下传递道具，以便我可以在下面的“日历”组件中说'this.props.events‘之类的话，并遍历列表？格式化事件以便以正确的格式传递给MyCalendar表示组件？

import React, { PropTypes } from 'react';
import MyCalendar from '../components/bigCalendar';
import _ from 'lodash';

// Simple example of a React "smart" component
export default class Calendar extends React.Component {
    componentDidMount(){
        console.log("mounted");
        console.log(this.props);
    };
  render() {
    return (
      <div>
        <MyCalendar events={this.props}/>
      </div>
    );
  }
}

client/app/bundles/HelloWorld/components/bigCalendar.jsx

最后，我想将@events传递到这个组件，我的直觉是弄清楚如何格式化上述容器组件中的事件，并将格式正确的事件传递给MyCalendar表示组件。目前，我正在使用测试data..which，这就是您看到import events from './events';的原因。

import React, { PropTypes } from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import events from './events';

BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);

const MyCalendar = props => (
  <div className="calendar-container">
    <BigCalendar
      events={events}
      scrollToTime={new Date(1970, 1, 1, 6)}
      defaultDate={new Date(2015, 3, 12)}
      defaultView='month'
      defaultDate={new Date(2015, 3, 12)}
    />
  </div>
);

export default MyCalendar;

Answer 1

首先，您需要更正.erb react_component道具

<%= react_component("CalendarApp",
                props: {events: @events},
                prerender: false) %>

接下来，要将this.props作为字符串对象从构造函数中传递。

constructor(props) {
  super(props);
    this.state= {
       examples: JSON.stringify(this.props.examples)
    };
}

如果您有一个使用ES6语法的事件数组，您可以通过this.state进行循环。

 var examples = this.state
 examples = this.props.examples.map((example) => {
      return(
           <div key={example.id}>{example.name}</div>
      );
  });

然后，您需要将新创建的循环传递到任何您想要的位置。

  return(
     <div class="col-md-10">
        {examples}
     </div>
  );

还有砰！你拿到了！只需记住从.erb控制器传递数据