Question

我有一个名为Svg.js的文件，结构如下：

const Svg =({children, height, width, className, ...otherProps}) => {
  return <svg width={width} height={height} viewBox={"0 0 " + vpWidth + " " + vpHeight} className={className} style={{height: height + "px", width: width + "px"}}>{children}</svg>
}

export default Svg

然后像这样使用：

const icon = (
    <Svg width="25" height="23" vpHeight="23" vpWidth="25" className="nav-icon">
        {React.createElement(brandingConfig.svgs.Add)}
     </Svg>
)

（导入的文件中有一个名为brandingConfig的对象，其子对象名为svgs，其中包含导入品牌的SVG，在此示例中为{{1} ，代码如下）。

我在这样的JS（X）文件中定义了单独的SVG（导入到brandingConfigs中，如上所述）：

Add.js

所以这一切都很有效并呈现SVG。但是，我需要能够更改Web应用程序上的SVG以适应新品牌。我希望能够在不同的品牌中保持实际图标的宽度和高度相同，但SVG也有import React from 'react' const Add = ({}) => { // return SVG code } export default Add属性，它定义了画布大小和位置等。这些值对于每个品牌都是不同的。我希望这是在单个SVG文件（viewBox）中定义的，因为它需要保持不变。

那么如何在SVG代码所在的文件中定义Add.js和vpWidth，然后在Svg.js文件中访问它，而不是vpHeight元素被称为？我需要保持<Svg />相同。

从子元素中访问道具作为React和ES6中的参数

0 个答案: