#javascript #reactjs
#javascript #reactjs
Вопрос:
возникли проблемы с https://github.com/freeranger/react-bootstrap-tabs библиотека, используемая для создания вкладок в React
Мой код, который работает:
<Tabs onSelect={(index, label) => console.log(label ' selected')}>
<Tab label="TEST">
<div className="table-scrollable table-scrollable-borderless">
<table className="table table-hover table-light">
<thead>
<tr className="uppercase">
<th> # </th>
<th> First Name </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark </td>
</tr>
</tbody>
</table>
</div>
</Tab>
<Tab label="TEST2">
<div className="table-scrollable table-scrollable-borderless">
<table className="table table-hover table-light">
<thead>
<tr className="uppercase">
<th> # </th>
<th> First Name </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark </td>
</tr>
</tbody>
</table>
</div>
</Tab>
</Tabs>
Но если я изменю на
<Tabs onSelect={(index, label) => console.log(label ' selected')}>
{this.state.users.map(user=>
<Tab label={user} >
<div className="table-scrollable table-scrollable-borderless">
<table className="table table-hover table-light">
<thead>
<tr className="uppercase">
<th> # </th>
<th> First Name </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark </td>
</tr>
</tbody>
</table>
</div>
</Tab>
)}
</Tabs>
Это выдает мне ошибку
Ошибка типа: не удается прочитать свойство ‘props’ неопределенного компонента TABS._renderContent C:/Users/repos/node_modules/react-bootstrap-tabs/dist/index.js:198
Ответ №1:
У вас есть данные в вашем users
состоянии? Просматриваю код библиотеки в строке ошибки:
var contentClassNames = (0, _classnames2.default)('tab-content', this.props.contentClass, contentTab.props.className);
Я думаю, что он пытается найти вкладку внутри Tabs
компонента. Если ваше users
состояние пустое, результатом вашей карты будет пустой массив.
Попробуйте добавить вкладку по умолчанию помимо this.users.map
, или если не вкладку, то хотя бы фиктивный элемент типа a, который <div/>
вы можете скрыть с помощью css или, возможно, <React.Fragment/>
.
Комментарии:
1. Спасибо за ответ. Users не пустой, это просто простой массив (2) 0: «John» 1: «Mike»
Ответ №2:
Я думаю, что ваш массив users изначально пуст ([]). Это приводит к ошибке компонента tabs:
https://codesandbox.io/s/wyj88jky2k
Вы должны проверить, есть ли записи в this.state.users, прежде чем пытаться отобразить ваши вкладки.
Честно говоря, я ожидал бы, что библиотека tabs сможет обрабатывать пустой массив tabs — возможно, вы могли бы вызвать ошибку на их странице github.
Комментарии:
1. Спасибо за ваш ответ. Мой массив users изначально не пуст.
2. Чувак, когда я очищаю массив, ты получаешь именно эту ошибку meassage. В какой-то момент она должна быть пустой. Вы выходили из массива перед его отображением?
Ответ №3:
12 часов в коде имеют смысл.
Я меняю только вкладку, но мне нужно повторно отобразить весь элемент, начиная с вкладок после загрузки страницы
{!this.state.loading ? <UsersTabs users={this.state.users} /> : "Loading"}
С
class UsersTabs extends Component {
render() {
return (
<Tabs onSelect={(index, label) => console.log(label ' selected')}>
{this.props.users.map(market =>
<Tab label={user} >
...
</Tab>
)}
</Tabs>
);
}
}