Question

我试图将一系列事件对象传递给一个react-big-calendar组件。我从一个例子开始工作，而且我非常接近 - 但我有一些缺失的东西。如果我进一步解释代码示例，那就更容易了：

这是道具从铁轨视图传入的位置。 @events，是一个事件对象数组。这些事件需要格式化，以便在某些时候显示在大日历中：

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

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

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

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

以下是＆＃39; CalendarApp＆＃39;正在轨道视图中提供：

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

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

问题如何向下传递道具，以便我可以说出类似＆＃39; this.props.events＆＃39;在以下＆＃39;日历＆＃39;组件，并遍历列表？格式化事件，以便以正确的格式将它们传递给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>
    );
  }
}

客户端/应用程序/束/的HelloWorld /组件/ bigCalendar.jsx

最终我想将@events传递给这个组件，我的本能是弄清楚如何格式化上面容器组件中的事件，并将正确格式化的事件传递给MyCalendar表示组件。目前，我正在使用测试数据......这就是为什么你会看到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>
  );

和bam！你有它！只记得传递.erb控制器中的数据

React-on-Rails，传递和格式化道具？

1 个答案: