React.js - 같은 부모로부터 다른 자식을 언 마운트하고 다른 컴포넌트를 마운트하는 자식 컴포넌트에서 함수를 구현하는 방법은 무엇입니까? 예를 들어

Question

,이 같은 구성 요소 : 나는이 기능을 활성화하면

import React, { Component } from 'react'; 
import BodyContent from './BodyContent'; 
import BottomOne from './BottomOne'; 
import BottomTwo from './BottomTwo'; 
class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <BodyContent /> 
     <BottomOne /> 
     </div> 
    ); 
    } 
} 

export default App; 

내가 BottomOne을 마운트 해제하고 대신 BottomTwo 마운트 BodyContent의 기능을 구현하려는, 그래서 코드는이에 reestructured된다

import React, { Component } from 'react'; 
import BodyContent from './BodyContent'; 
import BottomOne from './BottomOne'; 
import BottomTwo from './BottomTwo'; 
class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <BodyContent /> 
     <BottomTwo /> 
     </div> 
    ); 
    } 
} 

export default App; 

나는 React에 매우 익숙하다. 더 좋은 방법이 있다면 제안을 할 수 있지만, 실제로는 최종 결과 인 BottomOne을 마운트 해제하고 BottomTwo을 마운트하는 BodyContent의 함수가 필요하다.

Answer 1

같은 뭔가 그 상위 구성 요소 (구성 요소에 대한 식별자의 일종)의 상태 변수를 유지하고 다른 구성 요소를 렌더링하는 데 그 상태 변수를 사용하여 달성하기 위해.

이와 함께 부모에서 자식으로 함수를 전달하고 해당 함수를 사용하여 부모 상태 값을 업데이트해야합니다. 이처럼

:

class App extends Component { 
    constructor(){ 
    super(); 
    this.state={ 
     renderOne: true, 
    } 
    this.update = this.update.bind(this); 
    } 

    update(){ 
     this.setState({renderOne: false}) 
    } 

    render() { 
    return (
     <div className="App"> 
     <BodyContent update={this.update}/> 
     {this.state.renderOne? <BottomOne /> : <BottomTwo/> } 
     </div> 
    ); 
    } 
} 

지금 BodyContent 구성 요소 호출 this.props.update() 내부에 다른 구성 요소를 렌더링.

Answer 2

state 또는 props을 사용하여 다른 구성 요소를 렌더링 할 수 있습니다.

예 :

import React, { 
    Component 
} 
from 'react'; 
import BodyContent from './BodyContent'; 
import BottomOne from './BottomOne'; 
import BottomTwo from './BottomTwo'; 
class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      decider: false 
     }; 
    } 
    render() { 
     const bottomContent = this.state.decider === true ? <BottomOne /> : <BottomTwo />; 
     return (
      <div className="App"> 
       <BodyContent /> 
       { bottomContent } 
      </div> 
     ); 
    } 
} 
export 
default App; 

Answer 3

당신은 렌더링 할 수있는 구성 요소를 알려주는 상태를 유지할 수 있습니다. 약이

import React, { Component } from 'react'; 
import BodyContent from './BodyContent'; 
import BottomOne from './BottomOne'; 
import BottomTwo from './BottomTwo'; 
class App extends Component { 
    changeBottomComponent = (comp) => { 
    this.setState({ showBottom: comp}) 
    } 
    render() { 
    return (
     <div className="App"> 
     <BodyContent changeBottomComponent={this.changeBottomComponent}/> 
     {this.state.showBottom === 1 ? <BottomOne /> : <BotttomTwo />} 

     </div> 
    ); 
    } 
} 

export default App; 

Answer 4

또한 상태의 구성 요소를 직접 사용하여 렌더링 할 수도 있습니다. 이런 식으로 좀 더 유연해질 수 있습니다. 구성 요소가 너무 상태가있는 경우

는

const BottomOne =() => <div>BottomOne</div>; 
 
const BottomTwo =() => <div>BottomTwo</div>; 
 

 
class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { show: BottomOne }; 
 
    this.toggleComponent = this.toggleComponent.bind(this); 
 
    } 
 

 
    toggleComponent() { 
 
    // Use whatever logic here to decide. 
 
    let show = BottomOne; 
 
    if (this.state.show === BottomOne) { 
 
     show = BottomTwo; 
 
    } 
 

 
    this.setState({ show }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.toggleComponent}>Change</button> 
 
     <this.state.show /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, 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>