如何從組件通過道具另一個組件

我有兩個組成部分，一個被渲染的其他內部和父母有被孩子需要一些行動，但我不知道怎麼傳下來如何從組件通過道具另一個組件

控制檯日誌在最後，我需要的行動傳遞給孩子，因爲孩子需要動作

事情是孩子已經呈現在同一個屏幕上，所以我不知道如何傳遞這個信息

父組件半徑：

render(){ 
    console.log("radiuscomp ", this.props) 
    return(
     <View> 
      <View> 
       <AppHeaderBar onLeftButtonPress = {this.pop} title = "Radius"/> 
      </View> 
      <ScrollView 
      style = {{height: this.state.visibleHeight}} 
      keyboardShouldPersistTaps = 'always' 
      > 
       {this.updateContent()} 
       <SearchLocation /> //this is the child component 
      </ScrollView> 
     </View> 
    ) 
} 

function mapStateToProps(state){ 
    return { 
     updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent 
    }; 
} 

function mapDispatchtoProps(dispatch){ 
    return bindActionCreators(actions,dispatch); 
} 

let SearchRadiusContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchRadiusComponent);

子組件的位置：

render(){ 
    return(
     <View> 
      <View style = {Styles.search}> 
       <TouchableOpacity onPress={() => this.requestLocationPermission()}> 
        <Image style = {{width: 30, height: 30}} source = {require('../_shared/components/Images/map.png')} /> 
       </TouchableOpacity> 
       <SearchBox 
       ref={ref => (this.autoCompleteInput = ref)} 
       onEndEditing={this.dismissLoading} 
       onChangeText={text => this.googlePlaceAutoCompletion(text)} 
       style={Styles.searchbox} 
       placeholder="Suburb or postcode" 
       /> 
      </View> 
      {this.alternateHistoryKeywords()} 
     </View> 
    ) 
} 

function mapStateToProps(state){ 
    return { 
     updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent 
    }; 
} 

function mapDispatchtoProps(dispatch){ 
    return bindActionCreators(actions,dispatch); 
} 

let SearchLocationContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchLocationComponent);

的孩子需要從父母因爲這段代碼中的子組件，節省了文本輸入值的行動

saveToHistory(){ 
    let here = false 
    this.state.searchLocationList.filter((find, index) => { 
     if(find.toLowerCase() == this.state.searchLocation.toLowerCase()){ 
      here = true 
     } 
    }) 
    if(here == false){ 
     this.setState({ 
      searchLocationList: [this.state.searchLocation, ...this.state.searchLocationList] 
     },()=> this.props.consumerTaskLocationHistoryEventAction(this.state.searchLocationList)) //this action is on parent but not on child 
    } 
}

Console Logs

來源

2017-10-09 Juan

你想要傳遞什麼？（剪裁我的答案） –

我需要將這些操作傳遞給孩子（控制檯日誌鏈接中的孩子，因爲孩子的代碼使用其中一些操作來存儲字符串的值。添加到文本輸入 – Juan

請不要使用redux將道具從父母傳遞給孩子。您需要知道您擁有智能組件（連接到redux商店）和普通組件（無需知道還原）。

您的代碼應該喜歡這個

state = { 
    lon: 54.002, 
    lat: 34.990, 
} 
render() { 
    return (
    <Parent> 
     <Child {...this.props} lat={this.state.lat} lon={this.state.long} /> 
    </Parent> 
); 
}

{...this.props}使得魔術和所有家長的道具將被傳遞給子組件。只需將REDX連接到父組件，然後將{... this.props}添加到子代

來源

2017-10-09 08:30:01

如果你看到console.log，你可以看到父母有所有這些行爲，但孩子沒有。我需要將這些行爲傳遞給孩子 – Juan

我現在明白了，那是簡單對不起，最初不明白謝謝這個作品 – Juan

如何從組件通過道具另一個組件

回答

相關問題