0

由于无法将我的道具传递给子组件，我在使用 React 时遇到了麻烦。我已经阅读了文档，但我仍然对需要采取哪些步骤感到困惑。这是使用 Ruby on Rails 和 react_on_rails gem 完成的。此时，Redux 尚未使用，我仍在学习 React 的基本知识。

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

index.html.erb

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

试图在 React 中获取它。数据显示在 Chrome 开发工具的 Elements 部分下。但是，我假设我可能没有正确绑定数据。LiftsList.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>
    );
  }
}

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

电梯.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>
    );
  }
}
4

1 回答 1

0

在 Lifts 中，您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>
  );
}

替换state为props并从中获取您的 idlift

请参阅：React 中的 state 和 props 有什么区别？

于 2017-03-17T03:31:59.080 回答