如何迭代

Question

当道具传递给在Redux的特定组件所以我有这个组件中，我使用地图功能调用另一个组件：

class configstepper extends React.Component { 
... 
//in render 
if(this.props.selected_devices){ 
    return(
      this.props.selected_devices.map((row, index) => (
       <DeviceProps key={index} row={row} index={index} /> 

      )))} 
     ...} 

现在我DeviceProps组件中获取数据，因此具有道具来呈现 我的问题是我想要的道具要具体到每个DeviceProps不是所有的人：

class deviceProperties extends Component { 
... 

//in render 
<RaisedButton style={styles.Button}label="Read From Device" primary={true} onClick={this.handleRead.bind(this)}/> 
<TextField id={this.props.index} value={this.props.read_data} readOnly/> 
... 
//handleRead where i trigger the action 
    handleRead(){ 

    this.props.read_device() 
} 

//mapstate to props 
function mapStateToProps(state){ 
return { 
    read_data:state.config.test}} 

connect(mapStateToProps,actions)(deviceProperties) 

数据是按键点击获取当我使所有DeviceProps组件获得相同的数据，同时我只想在点击的组件上获得它ENT。 我想不出围绕这一

Answer 1

的mapStateToProps功能的工作接受第二个参数是你传递到从父组件中的道具，你可以用这些来抓取你的状态的切片特定于您的每个DeviceProps实例。同样，mapDispatchToProps也接受道具作为第二个参数，允许您创建特定于每个DeviceProps实例的操作。

例如，假设你在道具均及格称为deviceId到您的DeviceProps组件，与deviceId是针对特定设备的唯一标识符：

<DeviceProps key={index} row={row} index={index} deviceId={deviceId} /> 

然后，你可以在你的地图状态下使用这个唯一的标识符道具功能如下：

class DeviceProps extends Component { 
    render() { 
     ... 
    } 
} 

function mapStateToProps(state, ownProps){ 
    return { 
    device: state.devices[ownProps.deviceId] 
    } 
} 

function mapActionsToProps(dispatch, ownProps) { 
    return bindActionCreators({ 
    readDeviceData:() => DeviceActions.readDeviceData(ownProps.deviceId) 
    }, dispatch) 
} 

connect(mapStateToProps, mapActionsToProps)(DeviceProps)