Question

我正在寻找一种更好的方法来处理传递给组件Tabs的众多道具。目前，我正在从父组件中的内容/函数处理子组件Tabs。随着我继续添加更多内容，此道具列表将变得更长。基本上，我从我的选项卡填写输入和onChange我更新父组件中的副本。

  <Tabs
    nav1Title='Title 1'
    nav1Content='{Nav1tab}'
    onChangeNav1={this.handleChange}
    nav2Title='Title 2'
    nav2Content='{Nav2tab}'
    onChangeNav2={this.handleChange}
    nav3Title='Title 3'
    nav3Content='{Nav3tab}'
    onChangeNav2={this.handleChange}
    onChangeText1={this.handleChange}
    onChangeText2={this.handleChange}
    onChangeText3={this.handleChange}
    onChangeText4={this.handleChange}
    onChangeText5={this.handleChange}
    onChangeText6={this.handleChange}
    onChangeText7={this.handleChange}
  />

更改功能：

  handleChange(e) {
    this.setState({[e.target.name]: e.target.value})
  }

Nav1tab子组件中的输入示例：

<FunTab handleChangeText1={this.props.onChangeText1} />

然后是FunTab子组件中的输入：

Answer 1

更简单的方法是只有一个选项卡数组并将它们映射到TabItems，如：

const tabOptions = [
  {
    title: "Tab title",
    content: "Tab content",
    onChange: this.handleChange
  },
  ...
]

const Tabs = (tabOptions) => (
  tabOptions.map(tab => (
    <TabItem 
         title={tab.title} 
         content={tab.content} 
         onChange={tab.onChange} 
         key={tab.title} 
    />
  ))
)

对于更复杂但更灵活的东西，查看“复合组件”模式（Ryan Florence对youtube谈话给出了很好的解释）。

ReactJS - 处理组件中的大量道具

1 个答案: