Question

所以我有以下反应本机元素组件：

<CheckBox
   containerStyle={[styles.checkBox, {borderColor: this.getCheckBoxColor(this.state.art)}]}
   textStyle={[styles.text, {color: this.getCheckBoxColor(this.state.art)}]}
   title='Art'
   checkedColor={this.getCheckBoxColor(this.state.art)}
   uncheckedColor={this.getCheckBoxColor(this.state.art)}
   checkedIcon='paint-brush'
   uncheckedIcon='paint-brush'
   size={15}
   checked={this.state.art}
   onPress={() => this.setState({art: !this.state.art})}
/>

基本上，我的应用程序将显示一系列类似这样的复选框，询问用户他们喜欢谈论的不同主题。在这种情况下，此复选框询问用户是否喜欢谈论艺术。因此，每个主题将具有一个复选框和一个状态值（在这种情况下，状态值是this.state.art），状态值可以为true或false，取决于是否选中了该复选框。函数getCheckBoxColor接收状态值并相应地设置复选框的颜色（如果状态为true，则复选框变为白色，如果状态为false，则复选框变为灰色）。事实是，有14个不同的主题，我不想复制和粘贴此组件14次，而不必在每个主题中都更改主题。我在考虑也许有一个可重用的复选框组件用作子组件，并向下传递它需要作为道具的特定主题数据（例如标题，选中和未选中的图标以及状态值），但是，由于复选框需要在按下状态时更改状态，我不确定如何完成此操作，因为React Native仅允许子组件通过将回调函数作为道具传递给子组件来更改父组件的状态，但我不知道想在父组件中编写14个不同的回调函数。有更好的方法吗？

Answer 1

您可以在父组件中使用通用函数，例如handleCheckboxUpdate = (name) => this.setState({ [name]: !this.state[name] })。

然后，子元素可以使用this.props.onCheckboxUpdate(this.props.title.toLowerCase())进行调用。

如果子元素的标题属性在父项状态中并不总是与键匹配，则可以添加一个额外的name属性。

Answer 2

这样定义您的14个主题。

const topics = [{name: 'art', title: 'Art'}, ...]

定义呈现复选框的常用方法。

renderCheckbox(key, title) {
  return (
    <CheckBox
      containerStyle={[styles.checkBox, {borderColor: this.getCheckBoxColor(this.state[key])}]}
      textStyle={[styles.text, {color: this.getCheckBoxColor(this.state[key])}]}
      title=title
      checkedColor={this.getCheckBoxColor(this.state[key])}
      uncheckedColor={this.getCheckBoxColor(this.state[key])}
      checkedIcon='paint-brush'
      uncheckedIcon='paint-brush'
      size={15}
      checked={this.state[key]}
      onPress={() => this.setState({ [key]: !this.state[key] })}
    />
  )
}

现在循环浏览您的主题并呈现所有14个复选框。

renderAllTopics(topics) {
  return(
    {topics.map((row, index) => (
      this.renderCheckbox(row.name, row.title)
    ))}
  )
}

如果只想用于特定主题，则可以这样渲染：

this.renderCheckbox(topicName, topicTitle)

希望这会有所帮助。

当您在本机反应中有多个重复组件时该怎么办

2 个答案: