React native 从嵌套组件响应本机redux分派操作

React native 从嵌套组件响应本机redux分派操作,react-native,redux,React Native,Redux,我想知道如何从第n级嵌套组件中分派操作。这就是我得到的： BodyContainer（包含connect、mapProps、mapDispatch等）=>Body =调度操作的主体（组件） ==网格（组件）-状态作为道具从主体传递，状态的某些元素部分作为道具进一步传递给下一个组件 ==方形（组件）-接收部分状态作为道具 现在，我想从Square组件发送一个动作来更改状态。我想我会先做一个SquareContainer，但它如何从网格中获取州的一部分呢 请参阅下面的组件（如果您需要更多信息，请告诉

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { listNumbers, pickNumber } from '../actions/numberActions';
import { populateRow, populateGrid } from '../actions/gridActions';
import Body from '../components/Body';

const mapStateToProps = state => ({
  numbers: state.numbers,
  grid: state.grid
});

const mapDispatchToProps = dispatch => (
  bindActionCreators({
    listNumbers,
    pickNumber,
    populateRow,
    populateGrid
  }, dispatch)
);

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

import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import Grid from './Grid';
import * as globalStyles from '../styles/global';


export default class Body extends Component {

  componentWillMount() {
    this.refresh();
  }

  refresh() {
    this.props.populateGrid();
  }
  render() {
    return (
      <View style={styles.body}>
        <Grid inGrid={this.props.grid} />
        <View style={styles.buttonContainer}>
          <Button
            onPress={this.refresh.bind(this)}
            title={'Regenerate the Grid'}
          />
        </View>
      </View>
    );
  }

}

import React, { PropTypes } from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import * as globalStyles from '../styles/global';

const Square = ({ sqValue }) => {
  const { square, textStyle, squareActive } = styles;
  return (
    <TouchableHighlight
      style={[square, sqValue[1] && squareActive]}
      onPress={() => console.log(sqValue[0])}
    >
      <View>
        <Text style={textStyle}>{sqValue[0]},{sqValue[1]}</Text>
      </View>
    </TouchableHighlight>
  );
};

import React，{Component，PropTypes}来自'React'；
从“react native”导入{视图、样式表、按钮}；
从“./Grid”导入网格；
从“../styles/global”导入*作为globalStyles；
导出默认类主体扩展组件{
组件willmount（）{
这个。刷新（）；
}
刷新（）{
this.props.populateGrid（）；
}
render（）{
返回(
);
}
}

import React, { Component, PropTypes } from 'react';
import { View, StyleSheet } from 'react-native';
import Square from './Square';
import * as globalStyles from '../styles/global';

export default class Grid extends Component {
  render() {
    const row = [];
    let i = 0;
    this.props.inGrid.forEach((r) => {
      r.forEach((c) => {
        i++;
        row.push(
          <Square key={i} sqValue={c} />
        );
      });
    });
    const { grid } = styles;
    return (
      <View style={grid}>
        {row}
      </View>
    );
  }

}

import React，{Component，PropTypes}来自'React'；
从“react native”导入{View，StyleSheet}；
从“./Square”导入正方形；
从“../styles/global”导入*作为globalStyles；
导出默认类网格扩展组件{
render（）{
常量行=[]；
设i=0；
this.props.inGrid.forEach（（r）=>{
r、 forEach（（c）=>{
i++；
推(
);
});
});
const{grid}=样式；
返回(
{row}
);
}
}

import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import Grid from './Grid';
import * as globalStyles from '../styles/global';


export default class Body extends Component {

  componentWillMount() {
    this.refresh();
  }

  refresh() {
    this.props.populateGrid();
  }
  render() {
    return (
      <View style={styles.body}>
        <Grid inGrid={this.props.grid} />
        <View style={styles.buttonContainer}>
          <Button
            onPress={this.refresh.bind(this)}
            title={'Regenerate the Grid'}
          />
        </View>
      </View>
    );
  }

}

import React, { PropTypes } from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import * as globalStyles from '../styles/global';

const Square = ({ sqValue }) => {
  const { square, textStyle, squareActive } = styles;
  return (
    <TouchableHighlight
      style={[square, sqValue[1] && squareActive]}
      onPress={() => console.log(sqValue[0])}
    >
      <View>
        <Text style={textStyle}>{sqValue[0]},{sqValue[1]}</Text>
      </View>
    </TouchableHighlight>
  );
};

import React，{PropTypes}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableHighlight}；
从“../styles/global”导入*作为globalStyles；
常量平方=（{sqValue}）=>{
const{square，textStyle，squaresactive}=样式；
返回(
console.log（sqValue[0]）}
>
{sqValue[0]}，{sqValue[1]}
);
};

import React, { Component, PropTypes } from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import * as globalStyles from '../styles/global';


export default class Square extends Component {
  render() {
    const { square, textStyle, squareActive } = styles;
    const { sqValue } = this.props;
    return (
      <TouchableHighlight
        style={[square, sqValue[1] && squareActive]}
        onPress={() => console.log(sqValue[0])}
      >
        <View>
          <Text style={textStyle}>{sqValue[0]},{sqValue[1]}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}

import React，{Component，PropTypes}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableHighlight}；
从“../styles/global”导入*作为globalStyles；
导出默认类Square扩展组件{
render（）{
const{square，textStyle，squaresactive}=样式；
const{sqValue}=this.props；
返回(
console.log（sqValue[0]）}
>
{sqValue[0]}，{sqValue[1]}
);
}
}