使用React创建交互式SVG组件

前端之家收集整理的这篇文章主要介绍了使用React创建交互式SVG组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我有一个SVG元素,其中包含所有美国州的路径. @H_301_1@<svg> <g id="nh"> <title>New Hampshire</title> <path d="m 880.79902,142.42476 0.869,-1.0765 1.09022,..." id="NH" class="state nh" /> </g> ... </svg>

SVG数据保存在扩展名为.svg的单独文件中.假设我想创建该映射的React组件,并完全控制它,以便我可以根据一些外部输入修改各个状态的样式.

使用Webpack,据我所知,我有两个加载SVG标记的选项:使用raw-loader将其作为原始标记插入,并使用dangerouslySetInnerHTML创建一个组件:

@H_301_1@var InlineSvg = React.createClass({ render() { var svg = require('./' + this.props.name + '.svg'); return <div dangerouslySetInnerHTML={{__html: svg}}></div>; } });

或手动将标记转换为有效的JSX:

@H_301_1@var NewComponent = React.createClass({ render: function() { return ( <svg> <g id="nh"> <title>New Hampshire</title> <path d="m 880.79902,..." id="NH" className="state nh" /> </g> ... </svg> ); });

最后,让我们说除了SVG地图之外,还有一个包含所有状态的简单HTML列表.每当用户将鼠标悬停在列表项上时,相应的SVG路径应该移动填充颜色.

现在,我似乎无法弄清楚如何更新React SVG组件以反映悬停状态.当然,我可以进入DOM,通过类名选择SVG状态并更改其颜色,但这似乎不是“反应”方式.一个手指将非常感激.

PS.我正在使用Redux来处理组件之间的所有通信.

你需要做两件事:

1)在每个列表项上设置一个事件监听器,以通知您的应用程序突出显示的项目.

@H_301_1@<li onMouSEOver={() => this.handleHover('NH')} onMouSEOut={() => this.handleUnhover()} > New Hampshire </li>

2)捕获数据,并将其传播到SVG组件.

这是一个更复杂的部分,它取决于你如何构建你的应用程序.

>如果您的整个应用程序是单个React组件,那么handleHover将只更新组件状态
>如果您的应用程序分为多个组件,则handleHover将触发作为prop传递的回调

让我们假设后者.组件方法可能如下所示:

@H_301_1@handleHover(territory) { this.props.onHighlight(territory); } handleUnhover() { this.props.onHighlight(null); }

假设您有一个包含SVG映射和列表的父组件,它可能看起来像这样:

@H_301_1@class MapWrapper extends React.Component { constructor(props) { super(props); this.state = { highlighted: null; }; } setHighlight(territory) { this.setState({ highlighted: territory }); } render() { const highlighted = { this.state }; return ( <div> <MapDiagram highlighted={highlighted} /> <TerritoryList onHighlight={(terr) => this.setHighlight(terr)} /> </div> ); } }

这里的关键是突出显示的状态变量.每次发生新的悬停事件时,都会突出显示值的更改.此更改会触发重新渲染,新值将传递到MapDiagram,然后可以确定要突出显示的SVG的哪个部分.

猜你在找的React相关文章