首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >有什么方法可以在react组件中获得道具吗?

有什么方法可以在react组件中获得道具吗?
EN

Stack Overflow用户
提问于 2015-09-08 18:30:38
回答 2查看 1.2K关注 0票数 0

有没有什么方法可以让react组件中的道具使用它进行操作并发送到渲染。

例如:

代码语言:javascript
复制
import React, {Component} from 'react';

export default class MapBox extends Component {
  componentDidMount() {
    L.mapbox.accessToken = 'here my token';
    var map = L.mapbox.map('map', 'some info', { zoomControl: false }).setView([48, 17], 5);

    new L.Control.Zoom({ position: 'topright' }).addTo(map);

    var path = [];

    this.props.data.map(function(item, i) {
      var icon;
      if (i === 0) {
        icon = L.mapbox.marker.icon({
          'marker-color': '#1087bf',
          'marker-size': 'large',
          'marker-symbol': 'airport',
        });
      } else {
        icon = L.mapbox.marker.icon({
          'marker-color': '#f86767',
          'marker-size': 'large',
          'marker-symbol': 'airport',
        });
      }

      var coordinates = [];
      var data = item.coordinates;

      data.map(function(item) {
        coordinates.push(parseFloat(item));
      });

      L.marker(coordinates, {
        icon: icon,
      }).addTo(map).bindPopup(item.flight.from.city);

      path.push(coordinates);
    });

    path.push(path[0]);

    var polyline_options = {
      color: '#1087bf',
      weight: 2,
      opacity: 1
    };

    L.polyline(path, polyline_options).addTo(map);
  }

  render() {
    return (
      div id="map" className="map_result"
    );
  }
}

请不要看渲染块html,因为我不知道如何使用括号发布它。

EN

回答 2

Stack Overflow用户

发布于 2015-09-08 18:36:30

您可以在render方法中访问this.props。如果您想在组件每次呈现时都计算path̀̀,那么就在那里计算它。如果你只想计算一次-as,那就把它赋值给this.path,而不是局部变量,或者使用this.setState({ path: path })将它存储到组件的状态中。

此外,在使用map时,您希望从传递给它的函数返回一个要存储在结果数组中的对象:

代码语言:javascript
复制
var path = this.props.data.map(function(item, i) {
    // compute coordinates
    return coordinates;
});
console.log(path); // [coordinates_for_data_item_1, coordinates_for_data_item_2, coordinates_for_data_item_3]
票数 0
EN

Stack Overflow用户

发布于 2016-09-14 14:44:37

你正在使用ES6,要获得props对象,你必须定义构造函数来访问它们:

代码语言:javascript
复制
  import React, {Component} from 'react';
  export default class MapBox extends Component {

    // Add this block to your code 
    constructor(props) { // <<------ see them
      super(props);
      this.props = props;
    }

    componentDidMount() {
      L.mapbox.accessToken = 'here my token';
      var map = L.mapbox.map('map', 'some info', { zoomControl: false }).setView([48, 17], 5);

      new L.Control.Zoom({ position: 'topright' }).addTo(map);

      var path = [];

      this.props.data.map(function(item, i) {
        var icon;
        if (i === 0) {
          icon = L.mapbox.marker.icon({
            'marker-color': '#1087bf',
            'marker-size': 'large',
            'marker-symbol': 'airport',
          });
        } else {
          icon = L.mapbox.marker.icon({
            'marker-color': '#f86767',
            'marker-size': 'large',
            'marker-symbol': 'airport',
          });
        }

        var coordinates = [];
        var data = item.coordinates;

        data.map(function(item) {
          coordinates.push(parseFloat(item));
        });

        L.marker(coordinates, {
          icon: icon,
        }).addTo(map).bindPopup(item.flight.from.city);

        path.push(coordinates);
      });

      path.push(path[0]);

      var polyline_options = {
        color: '#1087bf',
        weight: 2,
        opacity: 1
      };

      L.polyline(path, polyline_options).addTo(map);
    }

    render() {
      return (
        div id="map" className="map_result"
      );
    }
  }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32455410

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档