React.js - 如何在子组件中实现一个功能，从同一个父组件中卸载另一个子组件，并在其上安装另一个组件？

问题描述：

例如，像这样的部件：React.js - 如何在子组件中实现一个功能，从同一个父组件中卸载另一个子组件，并在其上安装另一个组件？

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。

答

为了实现这一保持在父组件（某种标识符成分）的状态变量，并使用该状态变量来呈现不同的组件。

除此之外，您还需要将函数从父项传递给子项，并使用该函数更新父项状态值。

像这样：

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()呈现另一个组件。

如果组件有状态也一样，你怎么建议我保持这些？我正在考虑将它们存储在应用程序组件上，并将它们作为道具传递。这是做到这一点的正确方法吗？ – Mikael

即使在卸载后，您还想要存储子状态值吗？如果是，那么你可以将它们存储在父组件中并传递道具，或者如果你使用的是redux/flux，那么将这些值保存在商店中。 –

是的，即使在卸载之后我仍然希望保存它们。我明白了，谢谢。 – Mikael

答

您可以使用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;

答

可以维持它告诉呈现哪个组件的状态。东西大致是这样的

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;

答

您还可以直接使用状态中的组件并呈现它们。这样可以更灵活。

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>

React.js - 如何在子组件中实现一个功能，从同一个父组件中卸载另一个子组件，并在其上安装另一个组件？

相关推荐