在组件页面中隐藏一个组件并显示另一个组件 - react js

Question

我有一个应用程序，我在其中创建了三个 components.js 页面，如下所示。

one.component.js：

import React, { Component } from "react";
import TwoComponent from 'two.component';
import ThreeComponent from 'three.component';
export default class OneComponent extends Component {
    render() {
        return (
             <>
                 Hi!
                 <TwoComponent />
                 <ThreeComponent />
             <>
        )
    }
}

两个.component.js：

import React, { Component } from "react";
export default class TwoComponent extends Component {
    render() {
        return (
             <>
                 Hi Two Component!
             </>
        )
    }
}

三个.component.js：

import React, { Component } from "react";
export default class ThreeComponent extends Component {
    render() {
        return (
             <>
                 Hi Three Component!
             </>
        )
    }
}

现在，我只想显示一个组件而隐藏另一个组件。

在 two.component.js 中，我有一个按钮。单击按钮时，我需要显示three.component.js，并且必须隐藏two.component.js。

将以上文件修改如下。

one.component.js：

import React, { Component } from "react";
import TwoComponent from 'two.component';
import ThreeComponent from 'three.component';
export default class OneComponent extends Component {
    render() {
        return (
             <>
                 Hi!
                 { 
                   this.state.count === 2 ?
                     <TwoComponent twoButtonClicked={this.props.triggerButtonClick} />
                     :
                     <ThreeComponent />
                 }
             <>
        )
    }
    
    triggerButtonClick(){ 
        this.setState({ count: 2 }); 
    }
}

两个.component.js：

import React, { Component } from "react";
export default class TwoComponent extends Component {
    render() {
        return (
             <>
                 <input type="button" onClick={this.twoButtonClicked} />
             </>
        )
    }
}

这里，函数 triggerButtonClick 没有触发。

请帮助我根据其中一个组件中的条件显示组件。提前致谢。

Answer 1

在组件 two.component.js 中，您正在访问 twoButtonClicked 方法作为 prop 传递，如 this.twoButtonClicked 但您应该像 this.props.twoButtonClicked 一样访问它。

import React, { Component } from "react";
export default class TwoComponent extends Component {
    render() {
        return (
             <>
                 <input type="button" onClick={this.props.twoButtonClicked} />
             </>
        )
    }
}

我已经更新了你的代码并在下面添加了一个sn-p，请检查

const { Component, Fragment } = React;

class TwoComponent extends Component {
  render() {
    return (
      <Fragment>
        <input type="button" onClick={this.props.twoButtonClicked} />
      </Fragment>
    );
  }
}

class ThreeComponent extends Component {
  render() {
    return <Fragment>Hi Three Component!</Fragment>;
  }
}

class OneComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //initialised count as `2` so as to display component two by default 
      count: 2
    };
  }

  //Converted to an arrow function in order to use this method
  //like `this.triggerButtonClick` otherwise we should bind this 
  //method in the constructor
  triggerButtonClick = () => {
    //Updating the count to `3` so as to hide component two.
    this.setState({ count: 3 });
  };

  render() {
    return (
      <Fragment>
        Hi!
        {this.state.count === 2 ? (
          <TwoComponent twoButtonClicked={this.triggerButtonClick} />
        ) : (
          <ThreeComponent />
        )}
      </Fragment>
    );
  }
}


ReactDOM.render(<OneComponent />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

Answer 2

首先，修复代码中的语法错误。

然后在编码时遵循最佳实践。例如，我们总是在组件末尾添加render 方法。

对您的代码进行的修复，使其按预期工作，如下所述。

one.component.js：

import React, { Component } from "react";
import TwoComponent from './two.component';
import ThreeComponent from './three.component'; // Fix 7 - Update component import statements with './'

export default class OneComponent extends Component {
    state = {
       count: 2, // Fix 2 - According to your requirement this should be 2.
    }; // Fix 1 - Define the state property  

    triggerButtonClick = () => { 
        this.setState({ count: 1 }); // Fix 4 - When consider your requirement this should be other than 2.
    } // Fix 3 - Use an arrow function here to define the method.

    render() {
        return (
             <>
                 Hi!
                 { 
                   this.state.count === 2 ?
                     <TwoComponent twoButtonClicked={this.triggerButtonClick} />
                     :
                     <ThreeComponent />
                 }
                 {/* Fix 5 - Remove this.props.triggerButtonClick and add this.triggerButtonClick */}
             <>
        )
    }
}

两个.component.js：

import React, { Component } from "react";
export default class TwoComponent extends Component {
    render() {
        return (
             <>
                 <input type="button" onClick={this.props.twoButtonClicked} />
                 {/* Fix 6 - Get twoButtonClicked from the props object. */}
             </>
        )
    }
}