使用React创建交互式SVG组件

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

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

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

  1. var InlineSvg = React.createClass({
  2. render() {
  3. var svg = require('./' + this.props.name + '.svg');
  4. return <div dangerouslySetInnerHTML={{__html: svg}}></div>;
  5. }
  6. });

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

  1. var NewComponent = React.createClass({
  2. render: function() {
  3. return (
  4. <svg>
  5. <g id="nh">
  6. <title>New Hampshire</title>
  7. <path d="m 880.79902,..." id="NH" className="state nh" />
  8. </g>
  9. ...
  10. </svg>
  11. );
  12. });

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

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

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

你需要做两件事:

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

  1. <li
  2. onMouSEOver={() => this.handleHover('NH')}
  3. onMouSEOut={() => this.handleUnhover()}
  4. >
  5. New Hampshire
  6. </li>

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

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

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

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

  1. handleHover(territory) {
  2. this.props.onHighlight(territory);
  3. }
  4.  
  5. handleUnhover() {
  6. this.props.onHighlight(null);
  7. }

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

  1. class MapWrapper extends React.Component {
  2.  
  3. constructor(props) {
  4. super(props);
  5. this.state = {
  6. highlighted: null;
  7. };
  8. }
  9.  
  10. setHighlight(territory) {
  11. this.setState({
  12. highlighted: territory
  13. });
  14. }
  15.  
  16. render() {
  17. const highlighted = { this.state };
  18. return (
  19. <div>
  20. <MapDiagram highlighted={highlighted} />
  21. <TerritoryList onHighlight={(terr) => this.setHighlight(terr)} />
  22. </div>
  23. );
  24. }
  25.  
  26. }

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

猜你在找的React相关文章