React在DOM中动态添加CSS兼容属性问题

在开发中像需要动态改变css属性值时需要在html中动态添加样式

//浏览器几种主要内核
function CompatibleCSS(prop){
	const prefixes = ['Moz', 'Webkit', 'O', 'ms'];  

	//获取浏览器带前缀属性
	const style = window.document.documentElement.style;  
	
	//构造各内核属性
	for (let i = 0; i < prefixes.length; i++) {
	   const key = browserPrefixToKey(prop, prefixes[i]);
	   if (key  in style) { 
	      //获取到前缀
	      //return prefixes[i];
	      return key ;
	   }
	}
	
	//构造方法  str为样式
	function kebabToTitleCase(str) {
	  let out = '';
	  let shouldCapitalize = true;
	  for (let i = 0; i < str.length; i++) {
	    if (shouldCapitalize) {
	      out += str[i].toUpperCase();
	      shouldCapitalize = false;
	    } else if (str[i] === '-') {
	      shouldCapitalize = true;
	    } else {
	      out += str[i];
	    }
	  }
	  return out;
	}
	
	//prop为样式 prefix为前缀
	function browserPrefixToKey(prop, prefix) {
	  return prefix ? prefix + kebabToTitleCase(prop) : prop;
	}
}

CompatibleCSS("transform");