有没有什么方法可以让react组件中的道具使用它进行操作并发送到渲染。
例如:
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,因为我不知道如何使用括号发布它。
发布于 2015-09-08 18:36:30
您可以在render方法中访问this.props。如果您想在组件每次呈现时都计算path̀̀,那么就在那里计算它。如果你只想计算一次-as,那就把它赋值给this.path,而不是局部变量,或者使用this.setState({ path: path })将它存储到组件的状态中。
此外,在使用map时,您希望从传递给它的函数返回一个要存储在结果数组中的对象:
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]发布于 2016-09-14 14:44:37
你正在使用ES6,要获得props对象,你必须定义构造函数来访问它们:
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"
);
}
}https://stackoverflow.com/questions/32455410
复制相似问题