react rails宝石在视图帮助器react_component中传递哈希

Question

我使用react rails创业板，在将散列传递给react_component视图助手时遇到了困难：

怎样才能相当于

React.render(<BookApp books={BOOKS} />, document.getElementById('react-container')); 

看上去像？

我以为

<div id="react-container">
  <%= react_component('BookApp', books: '{BOOKS}') %>
</div>

但是这种方法不会将散列值作为道具传递。我遗漏了什么？

在books.js.jsx中

var BOOKS = {
  ulysses: {
    slug: 'ulysses',
    title: 'Ulysses',
    body: 'YES BECAUSE HE NEVER DID...'
  },
  seizeTheDay: {
    slug: 'seizeTheDay',
    title: 'Seize the Day',
    body: 'Seize the Day, first published in 1956...'
  }
};

var CollapsibleBlock = React.createClass({
render: function() {
    return(
      <div className=
        {this.props.toggleState ? 'open' :
                                  'closed'}>
        <h3 onClick=
          {this.props
               .toggleHandler
               .bind(null, this.props.book.slug)}> // Uncaught TypeError: Cannot read property 'slug' of undefined
        </h3>
        <p>{this.props.book.body}</p>
      </div>
    );
  }
});

var BookApp = React.createClass({
    getInitialState: function() {
    return {
      ulysses: true,
      seizeTheDay: false
    }
  },
// code omitted

render: function() {
    return(
      <div>
        <h1>Toggable Content</h1>
        <button onClick={this.toggleAll}>Toggle all</button> {}
        <div>
          {this.toggableBooks(this.props.books)}
        </div>
      </div>
    )
  }
});

在CollapsibleBlock中，我得到了错误消息：

未定义的TypeError:无法读取未定义属性的“段塞”

我猜想这是由视图页面上的react_component调用中没有传递的空Books造成的。

Answer 1

您想给React组件一个JavaScript常量的名称，对吗？

那么，将名称作为字符串传递如何：

<div id="react-container">
  <%= react_component('BookApp', books_name: 'BOOKS') %>
</div>

然后，在组件中，使用字符串从window查找一个常量：

var BookApp = React.createClass({
  getInitialState: function() {
    // Look up BOOKS by name: 
    var books = window[this.props.books_name]
    // store the object as this.state.books
    return {
      ulysses: true,
      seizeTheDay: false,
      books: books,
    }
  },
  // ...
}

Answer 2

不如：

<div id="react-container">
  <%= react_component('BookApp', booksJSON: @books.to_json) %>
</div>

在构成部分中：

getInitialState: function () {
  return {
    books: (this.props.booksJSON.length > 0 ? JSON.parse(this.props.booksJSON) : []),
  }
  ...
}