경로에 따라 반응 구성 요소 속성이 전환됩니다.

저는 처음으로 React 프로젝트를 진행 중이며이 상황을 해결하는 방법에 조금 얽혀 있습니다.경로에 따라 반응 구성 요소 속성이 전환됩니다.

구성 요소는 여러 개의 다른 테마를 지원하며 표시되는 페이지에 따라 전환 할 수 있어야합니다.

export default class App extends React.Component { 
    render() { 
     return (
      <Router> 
       <div> 
        <Header theme='light' /> 
        <Switch> 
         <Route exact path='/' /> 
         <Route exact path='/about' component={About} /> 
         <Route exact path='/clients' component={Clients} /> 
         <Route exact path='/services' component={Services} /> 
        </Switch> 
       </div> 
      </Router> 
     ); 
    } 
}

가 Header 구성 요소가 theme 특성 (light 중 하나 dark 및 solid)를받을 수 있습니다 : 여기 내 루트 구성 요소입니다. 이 속성을 경로로 렌더링 된 구성 요소 내부에서 변경하고 싶습니다.

내 생각은 App 구성 요소에 setHeaderTheme 메서드를 추가하고이 함수를 구성 요소에 전달하지만 a) 경로를 통해 구성 요소에 추가 속성을 전달하는 방법과 b) 이것이 짝수 인 경우 행동의 최선의 길.

출처

2017-10-20 Sam Hastings

은 다음과 같이 구성 요소 클라이언트에 루트에서 방법을 렌더링하기 위해 소품을 전달하려고 :

this.props.setHeaderTheme();

출처

2017-10-20 11:23:26 dpetrini

조언에 대한 감사의 모습이 바로 this.props.urlVariableHere

으로 URL 매개 변수에 액세스 할 수 있습니다. 신속한 후속 질문을 할 수 있습니까? 클라이언트 구성 요소 내에 헤더 테마를 설정하는 가장 좋은 곳은 어디입니까? 명령이 수명주기 콜백에 속해 있습니까? –

처음에는 헤더에 라우팅 된 구성 요소에서 변경할 기본 구성이있는 것으로 보입니다. 클라이언트와 같은 라우팅 된 구성 요소에 넣으면 클라이언트 구성 요소의 상태를 변경하거나 종속성을 가지지 않으므로 componentWillMount()와 같은 초기 lifeCycle에서 헤더를 변경할 수 있습니다. – dpetrini

하여 추가 합격 :

그런 다음, 내부 클라이언트는 당신에 의해 부모로부터 기능을 실행할 수 있습니다 다음 코드에 따라 경로를 통해 구성 요소에 매개 변수

<Route path="/abc" render={()=><TestWidget num="2" someProp={100}/>}/> 

or 

<Route exact path="/abc" render={props => <TestWidget someProp="2" {...props} />} />

다음에 TestWidget에서 u는 친절

Pass props to components

React url parameters

출처

2017-10-20 11:25:12 Asha

경로에 따라 반응 구성 요소 속성이 전환됩니다.

답변

관련 문제