Question

例如，像这样的组件：

controller as

我想在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

我对React很新，所以如果有更好的方法，我会接受建议，但我真的需要最终结果，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 /> <BottomTwo /> </div> ); } } export default App;并安装{ {1}}。

Answer 1

您可以维护一个状态，告诉您要呈现哪个组件。大致像这样的东西

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 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

实现在父组件中维护状态变量（组件的某种标识符）并使用该状态变量来呈现不同的组件。

除此之外，您还需要将一个函数从parent传递给child，并使用该函数来更新父状态值。

像这样：

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 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>

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

4 个答案: