获取从子组件传递的道具

时间:2019-01-09 19:34:19

标签: react-native expo

我有一个React Native应用,我在App.js中渲染地图,这是App.js的状态:

this.state = {
      region: null,
      shops: [
        {
          name: "name",
          rating: 0,
          coords: {
            latitude: 543543,
            longitude: 656546
          }
        }
      ]
    };

这是它的渲染代码:

 render() {
    const { region, shops } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <Map region={region} places={shops} />
      </SafeAreaView>
    );
  }

如您所见,我将商店状态传递给Map组件,并且在map组件中,我具有以下主要渲染器来渲染MapView:

render() {
    const region = this.props.region;
    return (
      <MapView
        style={styles.container}
        region={region}
        showsUserLocation
        showsMyLocationButton
      >
        {this.renderMarkers()}
      </MapView>
    );

您可以看到存在商店标记的this.renderMarkers():

renderMarkers() {
    return this.props.places.map((marker, i) => (
      <Marker key={i} title={marker.name} coordinate={marker.coords} >
        <View style={{
          flexDirection: 'row', width: 70, height: 60,
          backgroundColor: 'none',
        }}>
          <Svg
            width={60} height={50}>
            <Image
              href={require('icon.png')}
            />

            <Rating rating={marker.rating} />

          </Svg>
        </View>

      </Marker>
    ));
  }

每个标记都包含“图像”和“评分”组件,而我正在尝试通过这样的评分:rating = {marker.rating}到“评分”组件

现在在“评分”组件中,我正在尝试获得如下评分:

render() {
        let ratings = this.props.places;
        let stars = [];

        for (var i = 1; i <= 5; i++) {

            if (i > ratings.rating) {
// do something
            }

        }

        return (
            <View style={styles.container}>
                { stars }
            </View>
        );
    } 

现在您了解到,我将状态的整个对象从App组件传递到Map组件,然后我只想将Map组件的rating道具传递给Rating组件 该怎么做?

1 个答案:

答案 0 :(得分:1)

当您说评分成分时,您是指app.Run(async (context) => { try { var user = (WindowsIdentity)context.User.Identity; await context.Response .WriteAsync($"User: {user.Name}\tState: {user.ImpersonationLevel}\n"); WindowsIdentity.RunImpersonated(user.AccessToken, () => { var impersonatedUser = WindowsIdentity.GetCurrent(); var message = $"User: {impersonatedUser.Name}\t" + $"State: {impersonatedUser.ImpersonationLevel}"; var bytes = Encoding.UTF8.GetBytes(message); context.Response.Body.Write(bytes, 0, bytes.Length); }); } catch (Exception e) { await context.Response.WriteAsync(e.ToString()); } }); 成分吗? 我注意到在我认为属于<Star>组件的最后一段代码中,您尝试不正确地访问其道具。 如果您使用

<Star>

然后您应该在<Star rating = { marker.rating } /> 组件中获得该rating道具,例如:

Star