介绍
redux-svg 是一个库，可以将 svg 图片转换为 react 元素，并将其发送至 redux store。这个库可以使得开发者在 react 应用中更加方便地使用 svg 图片。
安装
使用 npm 进行安装。
npm install --save redux-svg
使用方法
初始化
首先需要在项目中引入 redux 和 redux-svg。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ --------------- ---- -------------------- ----- -------- - ----------------- -- - --------- - ------- --- ------- - --------- ---------------- -- ----- -------- --- ----- ----- - --------------------- -------------------
这个例子中我们将 redux-svg 存储在 store 的 svgStore 中，你也可以存储在不同的地方。
在组件中
在组件中使用时，需要使用 connect 函数将 redux 状态中的 svg 图片转换为 react 元素。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --- - ---- ------------
----- ----------- - ------- -- -
------ -
-----
---- -------------- ---------- --
--- ---- ---
------
--
--
----- --------------- - ------- -- -
------ -
------ --------------------- -- - --- -------- ----- -
--
--
------ ------- --------------------------------------这个例子中我们使用了 svgKey="mySvg" 将 svg 图片的 key 设置为了 mySvg，你可以根据需要设置自己的 key。在 mapStateToProps 中将需要的 svg 图片映射到组件的 props 上即可。
在 redux 中修改
在 redux 中修改 svg 图片时，需要使用 redux 的 dispatch 函数发送一个 action 到 reducer 中。
import { SvgAction } from 'redux-svg';
const svgXml = `<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>`;
const action = SvgAction.setSvg('mySvg', svgXml);
store.dispatch(action);这个例子中我们将一个 svg 的 XML 代码设置为了组件中 key 为 mySvg 的 svg 图片。你可以根据需要设置自己的 key 和 svgXML。
示例代码
下面是全部的示例代码，供您参考。
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ ---------------- - --------- - ---- ------------
------ - ------- - ---- --------------
------ - --- - ---- ------------
----- -------- - -----------------
-- - --------- - ------- --- ------- -
--------- ----------------
-- ----- --------
---
----- ----- - --------------------- -------------------
----- ----------- - ------- -- -
------ -
-----
---- -------------- ---------- --
--- ---- ---
------
--
--
----- --------------- - ------- -- -
------ -
------ --------------------- -- - --- -------- ----- -
--
--
------ ------- --------------------------------------
----- ------ - ----- ----------- -------------------- ------- ------- ------ -------------- ---------------- ------------- ----------
----- ------ - ------------------------- --------
-----------------------总结
redux-svg 可以让我们更加方便地在 react 应用中使用 svg 图片，使用方法也十分简便。希望通过这个文章能够帮助大家更好地了解并使用 redux-svg。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8c9e