如何迭代

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)