Question

遇到https://github.com/freeranger/react-bootstrap-tabs库的麻烦，该库用于在React上创建Tab

我的有效代码：

<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>

它给我错误

TypeError：无法读取未定义的属性“ props” TabsComponent._renderContent C：/Users/repos/node_modules/react-bootstrap-tabs/dist/index.js：198

Answer 1

您处于def to_dictionaries(z): a = {} for i in range(len(z)): sD = {} sD["long_name"] = z[i].long_name sD["iso_code"] = z[i].iso_code sD["iso_short"] = z[i].iso_short sD["iso_long"] = z[i].iso_long sD["capital"] = z[i].capital a[z[i].short_name] = sD return a状态的数据吗？在错误行上查看库的代码：

users

我认为它正在尝试在var contentClassNames = (0, _classnames2.default)('tab-content', this.props.contentClass, contentTab.props.className);组件内找到一个标签。如果您的Tabs状态为空，则您的地图将导致一个空数组。

尝试在users之外添加默认标签，或者如果没有标签，则至少添加一个虚拟元素，例如this.users.map，您可以通过CSS或<div/>隐藏该元素。

Answer 2

我认为您的用户数组最初是空的（[]）。这会使选项卡组件出错：

https://codesandbox.io/s/wyj88jky2k

在尝试呈现选项卡之前，应检查this.state.users是否包含条目。

说实话，我希望tabs库能够处理一个空的tabs数组-也许您可以在其github页面上引发一个错误。

Answer 3

12个小时的代码很有意义。

我只更改了 Tab ，但是需要重新渲染整个元素，从页面加载后从 Tabs 开始

{!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>
        );
    }
}

react-bootstrap-tabs库，编译错误

3 个答案: