0

我正在使用react-toolbox 选项卡，如果我将它们提取到单独的文件中，它们不会被渲染，但如果代码被提取到同一个文件中，它们会渲染。我无法弄清楚发生这种情况的原因。例如：

function programDayTab({id, name, startTime}) {
    return (
        <Tab key={id} label={name}>
            <small>Start date: {new Date(startTime).toDateString()}</small>
            <small>Start time: {new Date(startTime).toTimeString()}</small>
        </Tab>
    );
}

function programDayTabs(days) {
    return days ? days.map(day => programDayTab(day)) : "";
}
....
    render() {
        const days = this.props.days;
        return (
            <Tabs index={this.state.selectedTabIndex} onChange={this.handleTabChange} fixed theme={theme}>
                {programDayTabs(days)}
            </Tabs>
        );
    }

如果这两个函数保留在同一个文件中，那么一切正常。如果我将它们提取到单独的 JS 文件中并将它们导入到 React 组件文件中，那么选项卡将不会呈现，并且我在控制台中看不到任何错误。任何想法为什么会发生这种情况？谢谢！

4

1 回答 1

1

我们在 Discord 上进行了研究，问题是（未在原始问题中显示）：

import { Tab } from "react-toolbox/lib/tabs/Tab";

而不是这些正确的形式：

import { Tab } from "react-toolbox";

或者

import Tab from "react-toolbox/lib/tabs/Tab";
于 2017-08-25T10:52:17.827 回答