將道具傳遞給子代孩子

Question

我無法將我的道具傳遞給子組件，從而在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開發者工具的“元素”部分下。 但是，我假設我可能未正確綁定數據。 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獲取您的身份證

請參閱： 狀態和React中的prop有什么區別？