將道具傳遞給子組件

Question

我無法將我的道具傳遞給子組件，因此無法使用React。我已閱讀文檔，但我仍然對需要採取哪些步驟感到困惑。這是通過使用Ruby on Rails與react_on_rails gem完成的。在這一點上，Redux沒有被使用，我仍然在與React學習。

我一個變量從軌使用react_component具有以下發送：

index.html.erb

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

試圖把它撿起來的反應。數據顯示在Chrome開發工具的元素部分下。但是，我假設也許我沒有正確地綁定數據。似乎沒有出現在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。

很可能，你想要的東西，如：

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

同樣，在LiftsList，你可能想要的東西，如：

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

與props取代state從lift

得到您的ID

參見：What is the difference between state and props in React?

對於`lifts = {this.state.lifts}'的Lifts.jsx中的