홈>
자식 구성 요소에 대한 소품을 전달하는이 구성 요소가 있습니다 :
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import PortfolioPage from './PortfolioPage'
class PortfolioMenu extends Component {
constructor(props) {
super(props)
// here is the prop to be passed for a child component
this.state = {
interiorsUrl: "http://localhost:3001/interiors"
}
}
render() {
return (
<div>
<Router>
<div class="wrapper2">
<div class="wrapper-portfolio">
// here is the line to pass the prop
<Route exact path='/portfolio/interiores' render={() => <PortfolioPage interiorsUrl={this.state.interiorsUrl}/>} />
<nav>
<ul>
<li><NavLink activeClassName="active" exact to="/portfolio/interiores">• interiores</NavLink></li>
</ul>
</nav>
</div>
</Router>
</div>
)
}
}
export default PortfolioMenu
소품을받는 하위 구성 요소는 다음과 같습니다.
import React, { Component } from 'react'
import axios from 'axios'
import Modal from 'react-responsive-modal';
import Lightbox from 'react-lightbox-component';
const URL = this.props.interiorsUrl;
class PortfolioPage extends Component {
constructor(props) {
super(props);
this.state = {
result: []
}
}
componentDidMount() {
axios.get(URL)
//...rest of the code omitted
위의 컴포넌트에서 콘솔에 오류 메시지가 있습니다 :
TypeError: Cannot read property 'interiorsUrl' of undefined
이 코드 라인을 가리 킵니다 :
const URL = this.props.interiorsUrl;
무엇이 잘못 되었나요? 감사합니다.
- 답변 # 1
- 답변 # 2
class PortfolioPage extends Component { constructor(props) { super(props); this.state = { result: [] } } componentDidMount() { const { interiorsUrl } = this.props; axios.get(interiorsUrl) .then(response => this.setState({ result: response.data })) .catch(e => console.error(e)); } //...rest of the code omitted
관련 자료
- javascript - ReactJS에서 자식 컴포넌트에서 부모로 값을 전달하는 방법
- javascript - Vue에서 상위 뷰를 하위 경로 구성 요소로 바꾸는 방법
- react redux - ReactJS에서 부모 구성 요소 내에서 자식 구성 요소의 참조를 얻는 방법
- vue.js - Nuxtjs Axios 모듈, 하위 컴포넌트에서 데이터 가져 오기
- javascript - thisprops는 하위 구성 요소의 consolelog에서 작동하지만 렌더링하지는 않습니다
- javascript - Vue에서 하위 구성 요소의 데이터에 소품을 복사 할 수 없습니다
- reactjs - 상위 구성 요소가 마운트 해제 될 때 하위 소품 업데이트 방지
- reactjs - 각 li 요소를 항목의 자세한 페이지를 표시하는 구성 요소로 라우팅하려고 시도
- react native - 하위 컴포넌트에서 상위 함수 호출이 작동하지 않습니다
- javascript - ReactJS 제어 컴포넌트의 계단식 드롭 다운
- reactjs의 다른 파일에서 한 구성 요소의 상태를 사용하는 방법은 무엇입니까?
- javascript - 'react-router-dom'에서 Route의 컴포넌트 소품에 변수 전달
- javascript - ReactJS 컴포넌트 클래스에서 함수가 정의되지 않음 오류
- angular - 하위 모듈에 상위 모듈 경로 URL이 없습니다
- javascript - reactjs의 기능 구성 요소에서 JSON 파일을 읽고 데이터를 반복하는 방법
- javascript - 하위 vue 구성 요소 데이터 기능에서 소품에 액세스합니까?
- javascript - url에서/ - elementid /를 기반으로 목록을 렌더링하는 구성 요소를 올바르게 라우팅하는 방법
- javascript - 하위 구성 요소가 변경 사항으로 다시 렌더링되지 않음
- reactjs - 경로를 리디렉션하기 전에 구성 요소가 렌더링됩니다 렌더링을 어떻게 완화 할 수 있습니까?
- javascript - 부모 구성 요소의 인스턴스는 어떻게 자식 구성 요소 생성자로 전달됩니까?
관련 질문
- javascript : Refs를 사용하여 ReactJS에서 스타일링 클래스를 변경하려면 어떻게해야합니까?
- javascript : 내 setInterval을 지울 수없는 이유는 무엇입니까?
- javascript : if /else if 문을 Class 컴포넌트 내부의 함수로 어떻게 내보낼 수 있습니까? 반응, 노드, 표현
- javascript : 자체 상태 변경시 다시 렌더링되지 않는 React 기능 구성 요소
- javascript : 다른 API 호출 전에 API 응답 배열 지우기
- javascript : 이벤트 클릭시 setState에 대한 콜백 함수를 어떻게 작성할 수 있습니까?
- javascript : 상태 양식 옵션에 대한 자바 스크립트 조건
- javascript : React Native-권한 변경을 수신하는 방법?
- javascript : 토큰 업데이트시 측면 구성 요소를 업데이트 하시겠습니까?
- javascript : 배열의 반복 된 요소를 작동하지 않는 빈 배열로 푸시
컴포넌트 내부에서 this.props.interiorsUrl을 호출해야합니다.
따라서 어디에서나 {} 수업 후
예 :