Question

我有两个组件，一个在另一个内部呈现，父母有一些孩子需要的操作，但我不知道如何传递它

控制台记录最后，我需要将动作传递给孩子，因为孩子需要动作

事情是孩子已经在同一个屏幕上呈现，所以我不知道如何传递这些信息

父组件半径：

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

由于子组件中的代码保存了文本输入值

，因此Child需要父级的操作

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将道具从父母传递给孩子。你需要知道你有智能组件（连接到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}制作魔法，所有父道具都会传递给子组件。只需将redux连接到父组件，然后将{... this.props}添加到子

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

1 个答案: