Блог

У меня есть панель вкладок в моем компоненте Tabbar, в котором я изменяю индексные реквизиты :

 class Tabbar extends Component {

state = {
    index: this.props.index,
    name: this.props.name,
    image: this.props.image
};

changeTabs = () => {
    this.setState({index: this.props.index});
}

render() {
    return (
        <React.Fragment>    
        <div id={this.state.index} className="col">
            <button onClick={this.changeTabs}></button>
        </div>
        </React.Fragment>
        
    );

}

}

export default Tabbar;
  

А затем в моем другом компоненте я хочу повторно отобразить фрагмент после изменения реквизита. Вот мой код :

 import Tabbar from './Tabbar';

class Tabview extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {index: 0, name: "tab0", image:require('../Assets/profile.svg'),childView: {ProfilePage} },
                {index: 1, name: "tab1", image:require('../Assets/home.svg'),childView: {HomePage}},
                {index: 2, name: "tab2", image:require('../Assets/blog.svg'),childView: {BlogPage}},
              ],
        }
    }

    handleRender = () => {
        this.state.tabs.map(item => {
            if (item.index === this.props.index) {
                return <item.childView/>;
            }
        })
        return <BlogPage/>;
    }


    render() {

        return (
        <div>
            <Header/> 

            {this.handleRender()}
            {this.state.tabs.map(item => 
                        <Tabbar key={item.index} index={item.index} name={item.name} image={item.image}/>
                    )}


    
        </div>
            

        );

    }

}

export default Tabview;
  

Метод «handleRender» должен обрабатывать рендеринг.
Я пытался использовать «componentDidMount» или «componentDidUpdate», но у меня не получилось.

Как я могу заставить его работать?

Заранее благодарю вас!

По этой причине вам не нужно иметь состояние в дочернем компоненте, вы можете просто выполнить обратный вызов в родительском и вызвать его в дочернем компоненте, как показано ниже.

 import React, { Component } from "react";

class Tabbar extends Component {
  render() {
    return (
      <React.Fragment>
        <div id={this.props.index} className="col">
          <button
            onClick={() => this.props.changeTabs(this.props.index)}
          ></button>
        </div>
      </React.Fragment>
    );
  }
}

export default Tabbar;
  

И в родительском вы поддерживаете активное состояние индекса

 import Tabbar from "./Tabbar";
import React, { Component } from "react";

class Tabview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
//your tabs
      ],
      activeIndex: 0
    };
  }

  handleRender = () => {
    this.state.tabs.map((item) => {
      if (item.index === this.state.activeIndex) {
        return <item.childView />;
      }
    });
    return <div />;
  };

  render() {
    return (
      <div>
        {this.handleRender()}
        {this.state.tabs.map((item) => (
          <Tabbar
            key={item.index}
            index={item.index}
            name={item.name}
            image={item.image}
            changeTabs={(index) => this.setState({ activeIndex: index })}
          />
        ))}
      </div>
    );
  }
}

export default Tabview;