svg - 使用 React 创建交互式 SVG 组件

Question

假设我有一个 SVG 元素，其中包含美国所有州的路径。

<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 的单独文件中。假设我想创建该 map 的 React 组件，并对其进行完全控制，以便我可以根据某些外部输入修改各个状态的样式。

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

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

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

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

最后，假设除了 SVG map 之外，还有一个包含所有州的简单 HTML 列表。每当用户将鼠标悬停在列表项上时，相应的 SVG 路径就会改变填充颜色。

现在，我似乎不知道如何更新 React SVG 组件以反射(reflect)悬停状态。当然，我可以进入 DOM，通过类名选择 SVG 状态并更改其颜色，但这似乎不是“ react ”方式。如果有人指点，我们将不胜感激。

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

Answer 1

你需要做两件事:

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

<li
    onMouseOver={() => this.handleHover('NH')}
    onMouseOut={() => this.handleUnhover()}
>
    New Hampshire
</li>

2) 捕获数据，并将其传播到您的 SVG 组件。

这是更复杂的部分，它取决于您如何构建应用程序。

• 如果您的整个应用程序是单个 React 组件，则 handleHover只需更新组件状态
• 如果您的应用分为多个组件，则 handleHover会触发作为 prop 传入的回调

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

handleHover(territory) {
    this.props.onHighlight(territory);
}

handleUnhover() {
    this.props.onHighlight(null);
}

假设您有一个父组件，其中包含 SVG map 和列表，它可能看起来像这样:

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>
        );
    }

}

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