react-native - 如何将 props 从组件传递到另一个组件

Question

我有两个组件，一个在另一个内部呈现，父级有一些 child 需要的 Action ，但我不知道如何传递它

最后的控制台日志，我需要将操作传递给 child ，因为 child 需要操作

问题是 child 已经在同一个屏幕上呈现，所以我不知道如何传递这些信息

父组件半径:

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

Answer 1

请不要使用 redux 将 props 从父级传递给子级。你需要知道你有智能组件(连接到 redux store)和普通组件(对 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}创造一个魔法，你所有的父 Prop 都会被传递给一个子组件。只需将 redux 连接到父组件并将 {...this.props} 添加到子组件