Draw SVG with path element which has className setted from state.
render:<svg> <path className={'a'+this.state.number} ...> </path> </svg>
Then change state by some event which result in redraw of svg/path element.
this.setState({'number' : ...);
Expected result path will have new className. Working result component is redrawn but className on path didn't change.
Example: http://jsfiddle.net/w4nxG/
Full source code if example is not working:
html:
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
css:
.a0 { color: red; stroke: red; } .a1 { color: green; stroke: green; }
js:
var Hello = React.createClass({
getInitialState: function() {
return {'number': 0};
},
handleClick: function(e) {
this.setState({'number' : (this.state.number +1)%2});
},
render: function() {
return
<div>
<svg width="60" height="60">
<path className={'a'+this.state.number}
fill="transparent"
stroke-width="10"
d="M0,0 L100,100">
</path>
</svg>
<div className={'a'+this.state.number}
onClick={this.handleClick}>
Hello {this.state.number}
</div>
</div>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
Draw SVG with path element which has className setted from state.
render:
<svg> <path className={'a'+this.state.number} ...> </path> </svg>Then change state by some event which result in redraw of svg/path element.
this.setState({'number' : ...);Expected result path will have new className. Working result component is redrawn but className on path didn't change.
Example: http://jsfiddle.net/w4nxG/
Full source code if example is not working:
html:
<script src="http://fb.me/react-js-fiddle-integration.js"></script>css:
.a0 { color: red; stroke: red; } .a1 { color: green; stroke: green; }js: