Question

我是React Native的新手，并致力于学习如何使用它构建应用程序。我有一个在打开应用程序时立即创建的子组件。

for(let i = 0; i < this.state.buses.length; i++){
    bus = this.state.buses[i]
    busMarkers.push(
    <BusMarker  
        company={bus.company}
        latitude={bus.location.latitude}
        longitude={bus.location.longitude}
        title={"Bus " + bus.routeNumber}
        description={"This bus is from " + bus.company}
        getThisRoute={this.getRouteLine} //this is the function i want to call when the busMarker is pressed
        markerRouteID={bus.routeID} //trying to give it the usable property here
     />
     )
}

bus.routeID是我以后需要使用的。这是我的BusMarker组件。

export default class BusMarker extends Component{
    handleClick = () => {
        routeID = this.props.markerRouteID
        this.props.getThisRoute(routeID)
    }

    render(){
        return (
            <MapView.Marker
                coordinate={{latitude: this.props.latitude, longitude: this.props.longitude}}
                title={this.props.title}
                description={this.props.description}
                image={busImg}
                onPress={this.handleClick}
            />
        )
    }
}

我希望能够按下BusMarker图标，获取routeID，并将其传递给父级以用于执行特定功能。

getRouteLine = (routeID) => {
    this.setState({markerRouteID: routeID})
    console.log("Route ID is: " + this.state.markerRouteID)
    //need to do more stuff here.
}

此时，代码正常工作，但在上面的控制台输出中，它表示this.state.markerRouteID是 null 。所以我不确定这是怎么回事。我已经做了足够的研究，知道做.bind（）并不是最好的主意，通过道具是必经之路。我已经看过很多关于将静态数据从子节点传递给父节点的帖子，反之亦然。但这让我陷入了困境，我不太确定从哪里开始。

编辑：我得到了下面的答案，但我想我会发布我到达的内容。
这是我在（onPress）上执行操作的BusMarker类

export default class BusMarker extends Component{
    render(){
        return (
            <MapView.Marker
                coordinate={{latitude: this.props.latitude, longitude: this.props.longitude}}
                title={this.props.title}
                description={this.props.description}
                image={busImg}
                onPress={() => this.props.getThisRoute(this.props.markerRouteID)}
            />
        )
    }
}

这是我在父母中初始化BusMarker组件的地方。

for(let i = 0; i < this.state.buses.length; i++){
    bus = this.state.buses[i]
    busMarkers.push(
    <BusMarker  
        company={bus.company}
        latitude={bus.location.latitude}
        longitude={bus.location.longitude}
        title={"Bus " + bus.routeNumber}
        description={"This bus is from " + bus.company}
        getThisRoute={this.getRouteLine} //this is the callback function i want to call when the busMarker is pressed
        markerRouteID={bus.routeID} 
     />
     )
}

当按下BusMarker时，这是我想要调用的函数。它位于父母。它设置routeLineCoordinates的状态。

getRouteLine(routeID){
    apiCalls.getRoute(routeID).then(results => {
        location = JSON.parse(results)
        this.setState({routeLineCoordinates: location})
    })
    .catch(error => {
        console.log("Something went wrong getting Route Line: " + error)
    })
}

父构造函数然后需要这个：

constructor(props){
    super(props)
    this.state = {
        routeLineCoordinates: [],
        markerRouteID: null
    }
    this.getRouteLine = this.getRouteLine.bind(this) 
}

最后在我的渲染函数中调用了一个函数

render() {
    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                showsUserLocation={true}
                showsMyLocationButton={true}
                initialRegion={this.state.region}
            >
            {this.addBusMarkers()}
            {this.addRouteLine()} //function that uses the changed state from the getRouteLine above
            </MapView>
        </View>
    );
}

Answer 1

您需要在构造函数中绑定您的函数。（在父组件中）

 constructor(props) {
    super(props) 
    this.yourFunction = this.yourFunction.bind(this)
}

不，绑定是必要的。它只是你不能绑定渲染中的函数，因为它被多次调用。

将道具从孩子传递给父母是空的

1 个答案: