JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>

JavaScript

var map;

map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
    layers: 'basic'
});

var layer = new OpenLayers.Layer.Vector("GML", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fopenlayers.org%2Fdev%2Fexamples%2Fgml%2Fpolygon.xml'",
        format: new OpenLayers.Format.GML(),
    }),
    eventListeners: {
        "featuresadded": dataLoaded
    },
});

console.log("Layer features # = " + layer.features.length)
console.log("Layer features = " + layer.features)

map.addLayers([wms, layer]);
map.zoomToExtent(new OpenLayers.Bounds(-3.92, 44.34, 4.87, 49.55));


function dataLoaded(event) {
    // 'this' is layer
    //alert(this.features);
    this.map.zoomToExtent(this.getDataExtent());
    this.features[0].style={
                fill: true,
                fillColor: "#00ff00",
            };
    this.features[1].style={
                fill: true,
                fillColor: "#ff00ff",
            };
    this.features[2].style={
                fill: true,
                fillColor: "#0000ff",
            };
    this.redraw();
}