Question

我想知道如何从第n级嵌套组件调度操作。这是我得到的：

BodyContainer（包含connect，mapProps，mapDispatch等）=＆gt;体

=调度操作的Body（Component）

== Grid（Component） - 状态从Body传递为props，状态的某些元素部分进一步作为props传递给下一个组件。

=== Square（Component） - 接收状态的某些部分作为道具。

现在，我想从Square组件调度一个动作来改变状态。我以为我会先做一个SquareContainer，但那么它将如何从Grid中获取状态的部分？

请参阅下面的组件（如果您需要更多信息，请告诉我们）：

BodyContainer：

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, { 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, { 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>
  );
};

编辑：我已将Square组件更改为有状态组件：

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>
    );
  }
}

我想从onPress = {}发送一个动作。谢谢

来自嵌套组件的react-native redux dispatch动作

0 个答案: