我想编写如下所示的标签组件,当我点击tab1以显示测试的内容时,它是正常的,但是当我定义类似 test2 <的类组件时/ strong>,这似乎是错误的。错误是&#39; Uncaught TypeError:不能将一个类称为函数&#39;。谢谢。
// use of component
const tabs = [
{tabName: 'tab1', content: () => <Tab.Pane component={test} /> },
{tabName: 'tab2', content: () => <Tab.Pane component={test2} /> }
];
const test = () => {
return (<HGroup>tetetetetetet</HGroup>)
};
class test2 extends Component {
render() {
return(<HGroup>123213</HGroup>)
}
}
@observer
export default class EditLabels extends Component {
render() {
return (<Tab panes={tabs} />)
}
}
// component
@observer
class Tab extends Component {
@observable activeIndex = 0;
static Pane = ({children, component}) => {
console.log(typeof component);
return (
<VGroup>
{children && <HGroup>{children}</HGroup>}
{component && component.call(this)}
</VGroup>
)
};
render() {
const { panes } = this.props;
return (
<VGroup>
<HGroup>{ panes.map((item, index) => {
return (<HGroup key={index}
onClick={() => this.activeIndex = index}
style={this.activeIndex === index && {color: 'red'}}>{item.tabName}</HGroup>)
})}
</HGroup>
{panes[this.activeIndex].content()}
</VGroup>
)
}
}