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; 

我想要實現對BodyContent該卸載BottomOne並安裝BottomTwo代替的函數，因此，當我激活功能，代碼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非常陌生，所以如果有更好的方法可以做到這一點，我很樂意提供建議，但我真的需要最終的結果，BodyContent上的一個函數，該函數卸載BottomOne並掛載BottomTwo。

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>