إعادة تقديم مكون على تكرار انقر على علامة التبويب نفسها في رد فعل مكون آخر

0

أعلم أن العنوان قد يكون مربكًا ، وقد يبدو كذلك على أنه تكرار ، يرجى قراءة الوصف بالكامل قبل وضع علامة عليه على أنه تكرار ، أنا جديد للرد وأحتاج إلى بعض المساعدة.

أنا أبني لوحة القيادة. لدي div شريط التنقل الذي يحتوي على علامات تبويب متعددة و div المحتوى الذي يحتوي على المحتوى المطابق. بمجرد النقر فوق علامة تبويب ، أقوم بتقديم المحتوى المطابق. داخل أي علامة تبويب ، يمكن للمستخدم القيام بأشياء / تغييرات مختلفة. لنفترض أن لدي علامة تبويب ABC والتي عند النقر عليها تنتج عرضًا أوليًا ، عندما أنقر على علامة التبويب هذه مرة أخرى عندما يتم النقر عليها بالفعل ، فأنا بحاجة إلى إعادة عرض محتوى علامات التبويب ABC.

ما أريد فعله بشكل أساسي هو أنه بعد النقر فوق الاختبار والاختبار التجريبي مرة واحدة ، ينقر المستخدم فوق الاختبار مرة أخرى ، يجب أن يختفي النص "اختبار تجريبي".

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;

1 إجابة

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'));
:مؤلف
فوق
قائمة طعام