将字符串从svg循环(属性和值与空间分离)转换为对象，以便在react组件内联中扩展。

Question

我有一个对象，它是一个svg定义：

  circle: [
    'cx="12" cy="12" r="8"',
  ],

我想转换成：

'cx="12" cy="12" r="8"'

我是说像这样的物体：

props = { cx:12, cy:12, r:8 }

有可能是房客还是..。现代javascript？

更新：

这里是我绘制svg的最后一个组件，它有两个最佳的解决方案。我有一个组件从一个库中画一个svg，它是一个简单对象的列表，路径，或者是可选的圆圈，这个svg组件接受大小和颜色。

import React from 'react';
import iconlibrary1 from './iconlibrary';

// @Alexandrou solution:
const getConditionalProps = ( mystring ) => {
  console.log('my string');
  console.log(mystring);
  let result=mystring.split(' ').reduce(function(acc,item,i){
    let keyAndValue=item.split('=');
    acc[keyAndValue[0]]=keyAndValue[1].replace(/\D/g,'');
    return acc;
  },{});
  return result;
}

// @Nina solution:
const getConditionalProps = ( mystring ) => {
  return Object.assign({}, ...mystring
    .split(' ')
    .map(p => p.split('='))
    .map(([k, v]) => ({ [k]: +v.match(/\d+/) }))
  );
};


const ShowIcon = (props) => {
  const icon = props.icon || '';
  const color = props.color || '#000000';
  const size = props.size || '24';
  const boxSize = '24';

  if (icon !== '' && iconlibrary1[props.icon]) {
    return (
      <svg width={size} height={size} viewBox={`0 0 ${boxSize} ${boxSize}`}   fill={color} >
        { iconlibrary1[props.icon].circle && <circle    { ...getConditionalProps(  iconlibrary1[props.icon].circle[0] ) }  />}
        <path d={iconlibrary1[props.icon].path[0]} />
      </svg>
    );
  }
  return null;
};
export default ShowIcon;

这里是iconlibrary.js，在这里我定义了svg映像，其中包含有路径或圆的属性。

const iconlibray1 = {
  vpnkey:
    {
      path: [
        'M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z',
      ],
      circle: [
        'cx="12" cy="12" r="8"',
      ],
    },
  exitapp:
    {
      path: [
        'M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z',
      ],
    },

};

export default iconlibray1;

此组件用于在本地html中显示svg，而不是通过简单的方式更改大小、颜色：

 <ShowIcon icon="exitapp" color="#FFFFFF" />

您可以从以下网站下载免费svg图标：

https://material.io/icons

打开文件，只复制主路径，不要复制最后一个路径，如果存在，则圈出

Answer 1

您可以采取一种多步骤的方法，首先按空格拆分字符串，然后用等号将字符串拆分，然后再将部分拆分为对象，然后再拆分为单个对象。

它正在与

• Object.assign用于从多个对象中获取单个对象，
• ...，接受可迭代性并使用部件作为参数，
• Array#map，用于将元素映射到不同的值中，
• String#split，用于获取由给定字符串分隔的部件数组，
• 破坏分配，用于获取数组或对象的一部分，
• 用于动态创建对象的计算属性名。

​

var string = 'cx="12" cy="12" r="8"',
    object = Object.assign({}, ...string
        .split(' ')
        .map(p => p.split('='))
        .map(([k, v]) => ({ [k]: +v.match(/\d+/) }))
    )
    
console.log(object);

​

Answer 2

其中一个解决方案可以是将split方法与reduce相结合。

通过传递一个replace模式来使用regex方法，以便从字符串中删除"字符。例如，"15"将变成15。

减()方法对累加器和数组中的每个元素(从左到右)应用一个函数，将其还原为单个值。

您还可以使用forEach方法而不是reduce。

​

let string='cx="12" cy="12" r="8"';
let result=string.split(' ').reduce(function(acc,item,i){
  let keyAndValue=item.split('=');
  acc[keyAndValue[0]]=keyAndValue[1].replace(/\D/g,'');
  return acc;
},{});
console.log(result);

​

替代解决方案：

​

var string='cx="12" cy="12" r="8"';
var result = {};
var parts = string.split(' ');
for (var i = 0; i< parts.length; i++) {
  var subValues = parts[i].split('=');
  result[subValues[0]] = subValues[1].substring(1, subValues[1].length -1);
}
console.log(result);

​