- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经成功制作了一张传单 map ,其中每个国家/地区的颜色根据我收到的 this.props.data
的输入而变化。在这个特定的 React 组件中。
它将正确显示国家/地区和初始颜色。然而,该信息每分钟都会从后端提供。如果this.props.data
更新时,国家/地区不会改变颜色 - 仅当我将鼠标悬停在特定国家/地区时;那么颜色真的会改变吗?
作为引用,我从文件(本质上是国家/地区的 JS 数据库)导入 React 类中的国家/地区,如下例所示:http://codepen.io/dagmara223/pen/jydMqy
这是我的源代码。
import React from 'react';
import L from 'leaflet';
import countries from './countries.js';
var Worldmap = React.createClass({
render: function() {
if(!this.props.data)
return <div> loading world map .. </div>;
let dataratio = this.props.data; // Props from main component
let size = Object.keys(dataratio).length; // Do we have data?
if(size > 1) { // If we do have data, ..
let dataratioToArr = Object.keys(dataratio).map(data => [ data, dataratio[data]]); // Conv. map to multidimensional array
let featuresArr = countries.features; // array of all countries in array features from countries.js
for(let i = 0; i < featuresArr.length; i++) // i = 178(no. of countries)
for(let j = 0; j < dataratioToArr.length; j++) // j = no. of countries we have with dataratio > 1 from backend
if(dataratioToArr[j][0] == featuresArr[i].id) // If ISO-3 compliant ID of country(f.e. "USA") matches, push a "data" property to countries.js
featuresArr[i].properties.data = dataratioToArr[j][1];
}
return(
<div id="leafletmap" style={{width: "100%", height: "80%", border: "2px solid black" }} />
)
},
componentDidMount : function() {
let geolocation = [];
// Retrieve geoloc coordinates
navigator.geolocation.getCurrentPosition(function(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
if(lat != null && lon != null) // If we can get latitude and longitude, reset geolocation and push values.
geolocation.length = 0;
geolocation.push(lat, lon);
if(!lat || !lon) // If we can't get latitude or longitude, set a default value.
geolocation = [0,0];
let map = L.map('leafletmap').setView(geolocation, 3); // ([coordinates], zoomlevel)
let info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>Data ratio</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.data + ' ratio'
: 'Hover over a country');
};
info.addTo(map);
function getColor(d) {
return d > 90 ? '#4a1486' :
d > 75 ? '#6a51a3' :
d > 50 ? '#807dba' :
d > 25 ? '#9e9ac8' :
d > 15 ? '#bcbddc' :
d > 5 ? '#dadaeb' :
d > 1 ? '#f2f0f7' :
'#D3D3D3'; // Default color of data doesn't exist or is 0.
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
fillOpacity: 1,
fillColor: getColor(feature.properties.data)
};
}
function highlightFeature(e) {
let layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
let geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(countries, { // from import
style: style,
onEachFeature: onEachFeature
}).addTo(map);
let legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
let div = L.DomUtil.create('div', 'info legend'),
grades = [1, 5, 15, 25, 50, 75, 90],
labels = [],
from, to;
for (let i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
});
}
});
export default Worldmap
我有这个componentDidMount
如getInitialState
首先;但我改为componentDidMount
因为这应该在数据更改时触发组件的重新渲染。该文档指出If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
- 这在我的代码中并没有真正发生。也许我误解了它?
我可以理解该组件是否从未重新渲染,但如果在各个国家/地区发生鼠标悬停事件(例如,我在美国上空,并且颜色值发生变化,颜色值将更改为正确的值),这非常奇怪,但直到发生这种情况(或刷新整个网站))
最佳答案
看起来您正在将两种不同的渲染概念合并为一个。当使用 React 时,它被设计用来控制渲染过程;如果您引入另一个管理渲染的库,那么您可能会遇到问题。
React 设计为基于以下公式进行渲染:view = f(data),换句话说,您的 View 是数据的函数。在 React 中,数据通过 Props 或 State 来表达。在这种情况下,您没有使用 React 来管理 props 或状态,而是使用“传单”。您需要决定是使用 React 还是 Leaflet 来控制渲染,然后再决定。在这种情况下,最好将所有事情留给 Leaflet,因为它有自己的 API 用于渲染和管理交互。
关于javascript - 传单 w/React : Individual country color won't re-render when this. Prop 更新,仅当鼠标悬停时发生?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42903172/
我需要在每个渲染帧完成后拍摄屏幕截图,但我发现某些屏幕截图是重复的,所以我想知道是否可以在渲染完成之前保存屏幕截图。因此... renderer.render() 会阻塞直到完成渲染吗? 如果没有,有
web.py 骨架代码中的“render._keywords['globals']['render'] = render”是什么意思? http://webpy.org/skeleton/0.3 最佳
所以在我的 Nuxt universal-mode 应用程序中,我有时会出现错误: vue.runtime.esm.js:620 [Vue warn]: The client-side rendere
我想创建一个 portal-like effect使用 Bevy . Unity 似乎有一个 render texture实现这一目标。 有没有办法在 Bevy 中做同样的事情?如果没有, futur
我有一个看起来像这样的组件(非常简化的版本): const component = (props: PropTypes) => { const [allResultsVisible, setA
编辑:我调整了代码,但问题仍然存在。见下文 我有这个 p:selectOneRadio : 而这个 p:radioButton : 和 AData包含其
为了渲染部分我可以使用 render 'partial_name' 或 render partial: 'partial_name' 我开始知道 render 是 render partial 的简写
我注意到文章中的一些地方使用了 React.render() 和一些地方 ReactDOM.render()。这两者有什么具体区别吗? 最佳答案 这是 0.14 中引入的最新更改。他们将 React
我的代码是这样的: function render() { renderer.render( scene, camera ); renderer.clear(); } 我想知道为什么它
我目前正在实现 useSWR 以便从我的 express 和 mongo-db 后端获取数据。我能够从数据库中成功获取数据没问题。以下是我用来实现此目的的代码: ```//SWR method for
我只有在按照 React native - "this.setState is not a function" trying to animate background color? 的建议合并了 u
所以我有一个大的纹理,被分成 64x64 block 。 我使用将其加载到 LibGDX texture = new Texture("texturemap.png"); regions = Text
我对放置 @Scripts.Render 和 @Styles.Render 的位置感到很困惑。理想情况下,我会将它们全部放在 head 部分中,但出乎意料的是,例如 @Scripts.Render("
我正在尝试使用 jamon 来收集使用 Tapestry 的网站的统计信息(呈现网页的时间)。 我怎样才能拥有 服务器收到请求时执行的方法,即渲染开始时? 响应全部发送完毕,即渲染结束时执行的方法 ?
在我的 React 应用程序中,我想要渲染一个 prop 值,但直到渲染完成后更新 props 后它才存在。 this.props.users 是一个对象,因此我使用 Object.keys() 转换
我正在使用 React 的钩子(Hook),我希望有一个从数据库中检索到的值作为初始值。但是,我收到以下错误: Invariant Violation: Invariant Violation: Re
我正在尝试按照以下代码将多个场景包含到单个 webgl 渲染器中: renderer.render(scene1, camera); renderer.render(scene2, camera);
我在我的 xhtml 页面中使用此代码,当我运行应用程序时,元描述仍在呈现。我想根据某些条件使用元描述标签。主布局: ..........
我正在使用react-native-render-html来渲染html。renderers方法允许我提供自定义函数来呈现特定标签。不过,我想使用源代码中的原始内部 HTML 将子组件替换为我的自定义
我有一个网格,可以渲染可变高度的卡片。 为了获取卡片的高度,我将卡片渲染在 ReactHeight 中。 ( https://github.com/nkbt/react-height ),这让我可以在
我是一名优秀的程序员,十分优秀!