Question

我正在使用Redux和React Native，我在使用密钥访问redux存储数组的特定索引时遇到问题。

这里对我尝试做的事情有一个粗略的了解。我有一个ParentComponent访问一个状态data的reduxStore，而data包含一个id，title的数组。

class ParentComponent extends Component {

  dataArray() {
    return Object.keys(this.props.data).map(key => this.props.data[key])
  }
  /*
    Consider the dataArray has elements which are an array of `id` & `title` 
  */

  render() {
    return (
      <ScrollView style={styles.fragmentContainer}>
        {this.dataArray().map((element) => {
          return 
          <ChildComponent
            key={element.id}
            id={element.id} />
        })}
      </ScrollView>
    )
  }

}

现在我想通过title访问数组中每个元素的ChildComponent。这就是我尝试访问它的原因：

class ChildComponent extends Component {
  render(
    return (
      <View>
        <Text>{this.props.data[this.props.id].title}</Text>
      </View>
    )
  )
}

显然上述情况并不奏效。它只是想知道我想做什么。我无法使用给定的data访问redux商店key。我试图找出如何访问它，但我找不到解决方案。我的ChildComponent访问状态的方法是错误的。任何人都可以推荐我如何实现这一目标吗？

注意：我特别想通过ChildComponent访问该状态。如果这不是它应该如何工作，请参考我的其他方式或一些文档，解释如何做到这一点。

Answer 1

如果您的子组件是类组件，则可以导入connect，在mapStateToProps中设置您的reducer并将其绑定到export。

您还可以将reducer prop值作为从父组件到子组件的道具发送。这样的事情<Child value={this.props.myData} />。现在，在您的子组件中，您可以将其引用为this.props.value。如果您使用这种方法，那么您的孩子是否是一个类组件并不重要。不要忘记在子组件创建中实例value。

希望它有所帮助。

Answer 2

首先，我没有看到你将父母的data道具传给孩子。因此，您不会在您的子组件中获得this.props.data。

我不明白为什么你想以title的方式提取id，就像你通过connect一样传递它。

如果您特别想访问redux商店，则可以使用react-redux中的var $ = function (id) { return document.getElementById(id); } var calculate_click = function () { var subtotal = parseFloat( $("subtotal").value ); var taxRate = parseFloat( $("tax_rate").value ); var salesTax = subtotal * taxRate/100; var total= subtotal + salesTax; document.getElementById("sales_tax").value = salesTax; document.getElementById("total").value = total; } var clear_click = function () { } window.onload = function () { document.getElementById("calculate").onclick = calculate_click }。

这是一个链接，可以看到如何做到这一点 http://redux.js.org/docs/basics/UsageWithReact.html

通过子组件访问redux store in react native

2 个答案: