React.js - 同じ親から別の子をアンマウントし、別のコンポーネントをその場所にマウントするために、子コンポーネントで関数を実装するにはどうすればいいですか？例えば

Question

、このようなコンポーネント：

：私は機能を起動するときので、コードはこれにreestructuredされ、代わりに BottomOneとマウント BottomTwoをアンマウント BodyContentの機能を実装したい

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; 

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>