Question

我知道标题可能会令人困惑，也可能听起来像是重复，请在标记为重复之前先阅读整个说明，我是新来者，需要帮助。

我正在构建仪表板。我有一个具有多个选项卡的导航栏div和一个具有相应内容的内容div。单击选项卡后，我将呈现其相应的内容。用户可以在任何选项卡中进行各种操作/更改。可以说我有一个选项卡ABC，当单击该选项卡时会产生一个初始视图，当我再次单击此选项卡时又单击它，则需要重新渲染ABC选项卡的内容。

基本上，我想做的是在单击一次test和test-demo之后，用户再次单击test时，“ test-demo”文本应该消失。

import React, { Component } from 'react';

const Button = (props) => {
  return (
    <button onClick={() => props.onClick(props.buttonName.trim())}>{props.buttonName}</button>
  );
};

class Test extends Component {

  static initialState = () => ({
    appContent:null,
  });
  state = Test.initialState();

  switchTab = (buttonKey) => {
    this.setState(prevState => ({
      appContent:<a>{buttonKey}</a>
    }));
  }

  render() {
    let appContent = null;
    switch(this.props.navigationTab) {
    case "test":
      appContent = <Button onClick={this.switchTab} buttonName='test-demo' />    
      break;
    default:
      appContent = null     
      break;
    };
    return (
      <div>
        {appContent}
        {this.state.appContent}
      </div>
    );
  }
}

class AppContent extends Component {

  render() {
    return (
      <div>
        <Test navigationTab={this.props.navigationTab}/>
      </div>
    );
  }
}

class App extends Component {
  static initialState = () => ({
    navigationTab:null,
  });
  state = App.initialState();

  switchTab = (buttonKey) => {
    this.setState(prevState => ({
      navigationTab:buttonKey,
    }));
  }
  render() {
    return (
      <div>
        <div>
          <Button onClick={this.switchTab} buttonName='test'/>
        </div>
        <AppContent navigationTab={this.state.navigationTab} />
      </div>
    );
  }
}

export default App;

Answer 1

https://stackblitz.com/edit/react-fs8u7o?embed=1&file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const Button = (props) => {
  return (
    <button onClick={() => props.onClick(props.buttonName.trim())}>{props.buttonName}</button>
  );
};

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      appContent: null,
      hideTestDemo:false,
    };
  }

  componentWillReceiveProps(nextProps){
    this.setState(prevState => ({
      hideTestDemo:nextProps.hideTestDemo,
    }));
  }
  switchTab = (buttonKey) => {
    this.setState(prevState => ({
      appContent: <a>{buttonKey}</a>,
      hideTestDemo:false,
    }));
  }

  render() {
    let appContent = null;
    switch (this.props.navigationTab) {
      case "test":
        appContent = <Button onClick={this.switchTab} buttonName='test-demo' />
        break;
      default:
        appContent = null
        break;
    };
    return (
      <div>
        {appContent}
        {(!this.state.hideTestDemo ) ? this.state.appContent:null}
      </div>
    );
  }
}

class AppContent extends Component {
  render() {
    return (
      <div>
        <Test {...this.props} />
      </div>
    );
  }
}

class App extends Component {

  constructor() {
    super();
    this.state = {
      navigationTab: null,
    };
  }

  hideTestDemo = false;

  switchTab = (buttonKey) => {

    if (this.hideTestDemo)
      this.setState(prevState => ({
        navigationTab: buttonKey,
        hideTestDemo: true,
      }));

    else
      this.setState(prevState => ({
        navigationTab: buttonKey,
        hideTestDemo:false,
      }));
      this.hideTestDemo=!this.hideTestDemo;
  }

  render() {
    return (
      <div>
        <div>
          <Button onClick={this.switchTab} buttonName='test' />
        </div>
        <AppContent {...this.state} />
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

重复单击另一个组件reactjs中的同一选项卡，即可重新渲染组件

1 个答案: