将道具传递给子组件

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中的