在我的 React 应用程序中,当我进行服务器端更新时,我会返回一个响应,用于更新父组件的状态。但是对于我使用 react-responsive-tabs 的组件,它们不会得到更新。 这是我的 react 代码:
import React, {Component, Fragment} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import PageTitle from '../../../Layout/AppMain/PageTitle';
import {
faAngleUp,
faAngleDown,
faCommentDots,
faBullhorn,
faBusinessTime,
faCog
} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import Tabs from 'react-responsive-tabs';
import Roles from './Roles';
import Priviledges from './Priviledges';
export default class Apage extends Component {
constructor(props) {
super(props);
this.state = {
api: this.props.api,
session: this.props.session
}
}
componentWillMount() {
this.tabsContent = [
{
title: 'Roles',
content: <Roles api={this.state.api} session={this.state.session} />
},
{
title: 'Priviledges',
content: <Priviledges api={this.state.api} session={this.state.session} />
}
];
}
getTabs() {
return this.tabsContent.map((tab, index) => ({
title: tab.title,
getContent: () => tab.content,
key: index,
}));
}
onTabChange = selectedTabKey => {
this.setState({ selectedTabKey });
};
render() {
return (
<Fragment>
<PageTitle
heading="Roles & Priviledges"
subheading=""
icon="lnr-apartment icon-gradient bg-mean-fruit"
/>
<Tabs selectedTabKey={this.state.selectedTabKey} onChange={this.onTabChange} tabsWrapperClass="body-tabs body-tabs-layout" transform={false} showInkBar={true} items={this.getTabs()}/>
</Fragment>
)
}
}
我已经尝试在我的 <Roles />
中使用它标签:
shouldComponentUpdate(nextProps, nextState) {
return nextProps.session!= this.props.session;
}
但我无法让它为我工作。有什么线索吗?
我正在使用 laravel-mix 在 laravel 中运行我的 React JS。我实际上打算在使用 setState
提交表单时更新下拉列表.当我使用 React JS 作为 REST API 时,我已经做过很多次了。
最佳答案
在服务器响应后,我最终使用套接字 IO 在我的组件中触发 setSate
。尽管我更喜欢更整洁的东西。
关于javascript - 使用 react-responsive-tabs 时更新 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56037526/