react js의 스위치 구성 요소

Question

단일 페이지 응용 프로그램을 수행하고 있으며 구성 요소를 전환하려고합니다. 내가 구성 요소 3에있는 버튼을 클릭하면

image of my spa

, 나는 이렇게 어쩌면 구성 요소 3과 같은 5 와 구성 요소 (3) 전환됩니다 볼 수 있습니다 : 여기

는 보이는 방법 이미지입니다 한 프로젝트를 클릭하면 몇 가지 정보가 포함 된 프로젝트의 상세보기가 표시됩니다. 두 가지 구성 요소를 만들었습니다. 다른 모든 구성 요소는 같은 위치에 있어야합니다.

this.state.detailVisible 
     ? <ProjectDetailView/> 
    : null 

내가 올바른 그것을 할 방법을 반응 있는지 확실하지 않습니다 :

는 여기에 내가 구성 요소를 전환하는 방법을 내 코드입니다. 또한 구성 요소 3과 5에 대한 두 개의 서로 다른 CSS 파일이 있습니다. 두 구성 요소를 전환 할 경우 CSS가 포함 된 클래스 이름이 생깁니다.

라우터를 사용하는 것이 더 좋은 방법일까요? 어떻게 대응할 수 있습니까? 둘 다 component3 및 component5 다음 경로가 도움이 많이되지 않습니다 렌더링해야 할 경우 당신의 도움 :)

Answer 1

에 대한

덕분에 모든 것이, 필요에 따라 달라집니다.
그 중 하나만 렌더링해야하는 경우 경로를 사용하면 편리합니다. 여기
this.state.detailVisible && <ProjectDetailView/>

간단한 예이다 :
는 구문으로 난이 선호

const components = ["Component1", "Component2", "Component3"]; 
 

 
class Component extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     showDetails: false 
 
    }; 
 

 
    this.onComponentClicked = this.onComponentClicked.bind(this); 
 
    } 
 
    onComponentClicked(e) { 
 
    this.setState({ 
 
     showDetails: !this.state.showDetails 
 
    }); 
 
    } 
 

 
    render() { 
 
    const { name } = this.props; 
 
    const { showDetails } = this.state; 
 
    return (
 
     <div> 
 
     <div>Component{name}</div> 
 
     <button onClick={this.onComponentClicked}>Toggle Details</button> 
 
     {showDetails && <ComponentDetails name={name} />} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const ComponentDetails = ({ name }) => (
 
    <div> 
 
    <div>Details of component{name}</div> 
 
    </div> 
 
); 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>Parent</h2> 
 
     {components.map(c => { 
 
      return (
 
      <div> 
 
       <Component name={c} /> 
 
       <hr /> 
 
      </div> 
 
     ); 
 
     })} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>