从另一个文件导入代码时,不会呈现 React-toolbox 选项卡
React-toolbox Tabs don't get rendered when code is imported from another file
我正在使用 react-toolbox Tabs,如果我将它们提取到单独的文件中,它们不会呈现,但如果代码提取到同一文件中,它们就会呈现。我无法弄清楚发生这种情况的原因。例如:
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 组件文件中,那么选项卡将不会呈现,并且我在控制台中也看不到任何错误。任何想法为什么会发生?谢谢!
我们在 Discord 上解决了,问题是(未在原始问题中显示):
import { Tab } from "react-toolbox/lib/tabs/Tab";
而不是以下任何一种正确形式:
import { Tab } from "react-toolbox";
或
import Tab from "react-toolbox/lib/tabs/Tab";
我正在使用 react-toolbox Tabs,如果我将它们提取到单独的文件中,它们不会呈现,但如果代码提取到同一文件中,它们就会呈现。我无法弄清楚发生这种情况的原因。例如:
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 组件文件中,那么选项卡将不会呈现,并且我在控制台中也看不到任何错误。任何想法为什么会发生?谢谢!
我们在 Discord 上解决了,问题是(未在原始问题中显示):
import { Tab } from "react-toolbox/lib/tabs/Tab";
而不是以下任何一种正确形式:
import { Tab } from "react-toolbox";
或
import Tab from "react-toolbox/lib/tabs/Tab";