Question

我有一个连接到redux的容器，由于connect(mapStateToProps, mapDispatchToProps)行，它继承了props的“全局状态” ...

容器(Container.js)依次将这些道具向下传递到表(Table.js)，该表可以按预期收到罚款。

当我尝试使表格成为导航堆栈时，会发生我的问题。原因是我希望能够单击将导航到DetailPage的每一行，该行将由取决于行的不同道具填充。

但是，当添加StackNavigator时，我从容器传下来的所有道具都消失了，只有反应导航的道具在那里（navigation: {actions:{goBack... ETC}}）。

注意：如果我直接connect组件，也会发生这种情况。

下面是我的代码结构的精简示例。

我在做什么错/如何维护传递下来的道具？

Container.js

class Container extends Component {
  render() {
    return (
      <View>
        <Table {...this.props} />
      </View>
    )
  }
}


const mapStateToProps = state => {
  return {
    data: state.data,
    propTwo: state.propTwo
  }
}

const mapDispatchToProps = dispatch => {
  return {
    functionOne: () => dispatch(functionOne()),
    functionTwo: arg => dispatch(functionTwo(arg))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Market);

Table.js

const DetailPage = () => <View><Text>Just a mock page</Text></View>

class Table extends Component {
  keyExtractor = (item, index) => index;
  renderItem = (argOne, index) => {
    return (
      <ListItem
        onPress={() => this.props.navigate(argOne)}
        key={index} />
    )
  }
  render() {
    return (
      <View>
        <FlatList
          keyExtractor={this.keyExtractor}
          data={this.props.data}
          renderItem={this.renderItem}
          refreshControl={
            <RefreshControl
              onRefresh={this.props.functionTwo}
            />
          }
        />
      </View>
    ) 
  }
}
// react-navigation StackNavigator
export default Table = StackNavigator({
  Table: { screen: Table },
  DetailPage: { screen: DetailPage }
});

Answer 1

您可以将StackNavigator移至Container.js：

export default StackNavigator({
  Table: { screen: connect(mapStateToProps, mapDispatchToProps)(Container) },
  DetailPage: { screen: DetailPage }
});

您还可以直接connect到Table，而不用创建Container包装器类：

connect(mapStateToProps, mapDispatchToProps)(Table)

Answer 2

由于<?php if( have_rows('repeater_field_name') ): ?> <ul> <?php while( have_rows('repeater_field_name') ): the_row(); ?> <li><?php the_sub_field('sub_field_1'); ?>,<?php the_sub_field('sub_field_1'); ?>, etc</li> <?php endwhile; ?> </ul>是Table，因此您可以使用here所说的StackNavigator道具将道具传递给它。

由StackNavigator（...）创建的导航器组件具有以下道具：

screenProps-将其他选项传递到子屏幕，例如：

最终结果将是：

screenProps

您可以在class Container extends Component { render() { return ( <View> <Table screenProps={{...this.props}} /> </View> ) } }上以Table的身份访问

反应导航遗失的道具

2 个答案: