구성 요소 하위에 소품 전달

Question

하위 구성 요소에 내 소품을 전달할 수 없어서 문제가 있습니다. 설명서를 읽었지만 어떤 단계를 수행해야하는지 혼란 스럽습니다. 이것은 react_on_rails gem과 함께 Ruby on Rails를 사용하여 수행됩니다. 이 시점에서, 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에, 당신은 가능성이 원하는 같은 : props와 state을 대체하고 lift

에서 ID를 가져옵니다

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

참조 : What is the difference between state and props in React?