Javascript 将道具传递给组件子级

由于无法将道具传递给子组件，我在React方面遇到了问题。我已经阅读了文档，但是我仍然不知道需要采取什么步骤。这是使用RubyonRails和react_on_Rails gem实现的。在这一点上，Redux没有被使用，我仍然在学习React的诀窍

我正在使用react_组件从rails发送一个变量，其中包含以下内容：

index.html.erb

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

试着把它捡起来。数据显示在chromedev工具的Elements部分。但是，我假设可能我没有正确绑定数据。LiftsList.jsx中似乎没有显示任何内容。也许解决办法是显而易见的，但我现在真的想不通了

jsx.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>
    );
  }
}

import React，{PropTypes}来自'React'；
从“/LiftsList”导入LiftsList；
从“./Lift”导入Lift；
导出默认类。组件{
构造函数（道具，railsContext）{
超级（道具）；
此.state={
id:props.id，
日期：props.date，
liftname:props.liftname，
举重：道具，举重，
repsformed:props.repsformed，
}
}
render（）{
返回(


);
}
}

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>
    );
  }
}

import React，{PropTypes}来自'React'；
从“./Lift”导入Lift；
导出默认类LiftsList扩展React.Component{
render（）{
let lifts=this.state.lifts.map（lift=>
);
返回(
???
);
}
}

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>
    );
  }
}

import React，{PropTypes}来自'React'；
导出默认类提升扩展React.Component{
render（）{
返回(

{this.props.id}
{this.props.date}
{this.props.liftname}
{this.props.ismetric}
{这个.道具.举重}
{this.props.repsformed}

);
}
}

在电梯中，您的

状态

似乎未使用，而不是

此.state.Lifts

我认为您希望使用

此.state.props

相反，您可能需要以下内容：

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

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

构造函数（道具，\u railsContext）{
超级（道具）；
}
render（）{
返回(


);
}

同样地，在LiftsList中，您可能需要如下内容：

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

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

render（）{
let lifts=this.props.lifts.map（lift=>
);
返回(
???
);
}

它将

状态

替换为

道具

，并从

电梯

---

有关

Lifts={this.state.Lifts}，请参见：
in Lifts.jsx中的
Lifts={this.state.Lifts}
您尚未在该状态中定义Lifts。