React組件不影響導軌視圖

Question

我的反應組件未在導軌視圖中顯示。我不明白什麼是錯的。也沒有錯誤。只是空白頁。

我已經安裝了反應護欄寶石

這裏是我的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

不確定軌道寶石的工作方式，但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'的內容。在你的控制檯。