如何将 props 从组件传递到另一个组件 [英] How to pass props from component to another component

问题描述

我有两个组件，一个在另一个内部渲染，父级有一些孩子需要的动作，但我不知道如何传递

I have two components, one is rendered inside the other and the parent has some actions that are needed by the child but I don't know how to pass it down

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

Console Log at the end, I need the actions to get passed to the child because the child needs the action

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

The thing is the child is already rendered in the same screen so I don't know how to pass this information

父组件半径:

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 need the actions from parent because of this code in child component that saves text input value

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
    }
}

控制台日志

推荐答案

请不要使用 redux 将 props 从父级传递给子级.你需要知道你有智能组件(连接到 redux store)和普通组件(对 redux 一无所知).

please don't use redux to pass props from parent to child. You need to know that you have smart components (connected to redux store) and plain components (know about redux nothing).

你的代码应该是这样的

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} 添加到 child

{...this.props} makes a magic and all of your parent props will be passed to a child component. Just connect redux to parent component and add {...this.props} to child

这篇关于如何将 props 从组件传递到另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！