子コンポーネントに小道具を渡す

Question

子コンポーネントに小道具を渡すことができないため、問題が発生しました。私はドキュメントを読みましたが、私はまだどのステップを取る必要があるのか​​混乱しています。これは、ruby on Railsとreact_on_rails gemを使って行われます。この時点で、Reduxは使用されておらず、私はまだReactでロープを学習しています。

私は次のようにreact_componentを使用して、レールから変数に送信しています：

index.html.erb

<%= react_component('Lifts', props: @lifts, prerender: true) %> 

に反応してそれを拾うしようとしています。データはChrome開発ツールのElementsセクションに表示されます。しかし、私はおそらく私はデータを正しくバインドしていないと仮定しています。 LiftsList.jsxに何も表示されないようです。おそらく解決策は明らかですが、今は本当に私を逃れています。リフトで

Lifts.jsx

import React, { PropTypes } from 'react'; 
import LiftsList from './LiftsList'; 
import Lift from './Lift'; 
export default class Lifts extends React.Component { 

    constructor(props, _railsContext) { 
    super(props); 
    this.state = { 
     id: props.id, 
     date: props.date, 
     liftname: props.liftname, 
     weightlifted: props.weightlifted, 
     repsformed: props.repsformed, 
    } 
    } 
    render() { 
    return (
     <div className="container" style={{display : 'inline-block'}}> 
     <ul> 
      <LiftsList lifts = {this.state.lifts} /> 
     </ul> 
     </div> 
    ); 
    } 
} 

LiftsList.jsx

import React, {PropTypes} from 'react'; 
import Lift from './Lift'; 
export default class LiftsList extends React.Component { 

    render() { 
    let lifts = this.state.lifts.map(lift => 
     <Lift key={prop.id} {...lift} />); 
    return (
     <div> 
     <div>???</div> 
     </div> 
    ); 
    } 
} 

Lift.jsx

import React, {PropTypes} from 'react'; 
export default class Lift extends React.Component { 

    render() { 
    return (
     <ul> 
     <li>{this.props.id}</li> 
     <li>{this.props.date}</li> 
     <li>{this.props.liftname}</li> 
     <li>{this.props.ismetric}</li> 
     <li>{this.props.weightlifted}</li> 
     <li>{this.props.repsformed}</li> 
     </ul> 
    ); 
    } 
} 

Answer 1

、あなたのstateは未使用と表示され、代わりにthis.state.liftsの私は思いますthis.state.propsを使用します。あなたが代わりに何かしたいことがあり

：propsでstateを置き換え、lift

から自分のIDを取得

render() { 
    let lifts = this.props.lifts.map(lift => 
    <Lift key={lift.id} {...lift} />); 
    return (
    <div> 
     <div>???</div> 
    </div> 
); 
} 

：

constructor(props, _railsContext) { 
    super(props); 
    } 
    render() { 
    return (
     <div className="container" style={{display : 'inline-block'}}> 
     <ul> 
      <LiftsList lifts={this.props.lifts} /> 
     </ul> 
     </div> 
    ); 
    } 

と同様に、LiftsListでは、おそらくのような何かをしたいです

参照：What is the difference between state and props in React?