React 组件不影响 rails 视图

Question

我的 React 组件未显示在 rails 视图中。我不明白哪里出了问题。也没有错误。只是空白页。

我已经安装了react-rails gem

这是我的restaurant.js.jsx

var Restaurant = React.createClass({
    propTypes: {
        name: React.propTypes.string,
        address: React.propTypes.string,
        description: React.propTypes.text
    },

    render: function() {
        return(
            <div>
                <div> Name: {this.props.name}</div>
                <div> Address: {this.props.address}</div>
                <div> Description: {this.props.description}</div>
            </div>
            );
    }
})

这是我的index.html.erb

<%= react_component('Restaurant', {name: 'jdjdd', address: 'dnjkdndjlbkdj', description: 'dljbdjl'}) %>

Answer 1

不确定 rails gem 是如何工作的，但是 React.propTypes.text 不是有效的 propType。来自 docs;

React.createClass({
  propTypes: {
    // You can declare that a prop is a specific JS primitive. By default, these
    // are all optional.
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // Anything that can be rendered: numbers, strings, elements or an array
    // (or fragment) containing these types.
    optionalNode: React.PropTypes.node,

    // A React element.
    optionalElement: React.PropTypes.element,

    // You can also declare that a prop is an instance of a class. This uses
    // JS's instanceof operator.
    optionalMessage: React.PropTypes.instanceOf(Message),

    // You can ensure that your prop is limited to specific values by treating
    // it as an enum.
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // An object that could be one of many types
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // An object with property values of a certain type
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // An object taking on a particular shape
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // You can also specify a custom validator. It should return an Error
    // object if the validation fails. Don't `console.warn` or throw, as this
    // won't work inside `oneOfType`.
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error(
          'Invalid prop `' + propName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
    },

    // You can also supply a custom validator to `arrayOf` and `objectOf`.
    // It should return an Error object if the validation fails. The validator
    // will be called for each key in the array or object. The first two
    // arguments of the validator are the array or object itself, and the
    // current item's key.
    customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
      if (!/matchme/.test(propValue[key])) {
        return new Error(
          'Invalid prop `' + propFullName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
    })
  },
  /* ... */
});

与许多组件错误一样，您可能会在控制台中看到类似 'React is undefined.' 的内容。

React 组件不影响 rails 视图

React component not affect on rails view

ruby-on-rails

reactjs

react-rails