如何将React组件存储在状态中并传递回调函数

Question

我遇到一个问题，我试图将组件存储到我的状态中，并传递一个回调函数作为其道具，以便可以在 CustomComponent 内部调用它。这就是我所做的：

state = {
    tabs: [
        { tabID: '1', component: <CustomComponent testCallback={this.callbackHandler} />}
    ]
}


callbackHandler = () => {
    ....
}

但是当我尝试调用 CustomComponent 内部的函数（ this.props.testCallBack() ）时，它告诉我这不是一个函数。

像这样将组件存储在状态中可以吗？基本上，我想构建自己的选项卡组组件，可以在不同的选项卡中显示不同的组件。回调函数用于让父组件知道何时应该添加新选项卡。

我知道有一些选项卡库，但我只是好奇如何在这里做到这一点。

谢谢

Answer 1

您不想将 JSX 存储在状态中。相反，存储它的模型数据，并循环访问您的数据以打印您的元素！

你可以这样做：

state = {
    tabs: [
        { tabID: '1', callbackFunctionName: callbackFunction1 }
    ]
}

在您的render方法中，您可以使用有关存储在您的选项卡中的这些数据state来呈现自定义组件。

render(){
  const { tabs } = this.state;

  return (
    tabs.length > 0 && tabs.map((tab) => {
      return (
        <CustomComponent testCallback={this.tab['callbackFunctionName']} />
      )
    })
  )
}

Answer 2

您不应该将反应组件存储在状态中，状态仅用于数据：

例如：

  state = {
    tabs: [{ id: 1, content: "hello world", id: 1, content: "hello world 2" }],
  };

您render()可以使用该数据将其转换为反应组件：

  render() {
    const tabComponent = this.state.tabs.map((tab) => {
      <CustomComponent
        tabContent={tab.content}
        id={tab.id}
        testCallback={this.callbackHandler}
      />;
    });
    return (<>{ tabComponent }</>);
  }

希望能帮助到你！！