如何将组件传递给React中的另一个组件?

时间:2017-07-26 04:53:32

标签: reactjs mobx

我想编写如下所示的标签组件,当我点击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>
    )
}
}

0 个答案:

没有答案