Reactjs 反应是危险的吗？

我正在使用ReactJS，并且知道

危险的setinerHTML

，但我希望能够将元素的

样式

属性设置为原始字符串。我已经搜索并查看了React的来源，但什么也找不到

---

有办法做到这一点吗？

必须手动设置dom节点上的属性才能做到这一点。最简单的方法是使用包装器组件：

红色文本

以及实际的组件

var-DSA='dangerouslySetAttributes'；
var CustomAttribute=React.createClass({
setAttributes:函数（oldAttrs，attrs）{
var el=this.getDOMNode（）；
Object.keys（attrs）.forEach（函数（key）{
如果（oldAttrs[key]！==attrs[key]）
el.setAttribute（key，attrs[key]）；
});
},
componentDidMount:函数（）{
this.setAttributes（{}，this.props[DSA]）；
},
componentWillReceiveProps:function（nextProps）{
this.setAttributes（this.props[DSA]，nextProps[DSA]）；
},
render:function（）{
var Tag=this.props.Tag | |'div'；
返回{this.props.children}
},
});

---

*未测试

我更彻底地查看了React源代码，并在/src/vendor/core/camelize.js中发现：

/**
 * Copyright 2013-2014, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule camelize
 * @typechecks
 */

var _hyphenPattern = /-(.)/g;

/**
 * Camelcases a hyphenated string, for example:
 *
 *   > camelize('background-color')
 *   < "backgroundColor"
 *
 * @param {string} string
 * @return {string}
 */
function camelize(string) {
  return string.replace(_hyphenPattern, function(_, character) {
    return character.toUpperCase();
  });
}

module.exports = camelize;

/**
*版权所有2013-2014，Facebook，Inc。
*版权所有。
*
*此源代码根据中的BSD样式许可证进行许可
*此源目录树的根目录中的许可证文件。额外补助金
*可以在同一目录的专利文件中找到专利权的名称。
*
*@providesModule camelize
*@打字检查
*/
var _hyphenPattern=/-（）/g；
/**
*使用连字符字符串，例如：
*
*>camelize（“背景色”）
*<“背景色”
*
*@param{string}string
*@return{string}
*/
函数camelize（字符串）{
返回字符串.replace（_连字符模式，函数（_，字符）{
返回字符.toUpperCase（）；
});
}
module.exports=camelize；

因此，它有点低效，因为它将一个hypenated样式属性转换为camel大小写，然后React将其再次转换回来，但它确实有效。

为什么不使用？当您从资源接收到新状态时，React将负责呈现正确的样式属性

基本上，守则是：

classNames({
'random-string': condition ? true : false
});

---

为什么不在危险的HTML中设置整个标记，包括样式，如下所示：

var markup = "<div style='"+dynamicStyleString+"'>Content</div>"

<div dangerouslySetInnerHTML={{__html: markup}}></div>

var markup=“Content”

这应该可以完成工作

使用简单，危险性高。HTML：
Its simple to use dangerouslySetInnerHTML:
 <div dangerouslySetInnerHTML={{__html: this.props.value}}></div>

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

It will work same as like normal html/JS:

 <div id="name"></div>
 <script>
  document.getElementById('name').innerHTML = "test test";
 </script>

https://facebook.github.io/react/tips/dangerously-set-inner-html.html
它的工作原理与普通html/JS相同：
document.getElementById（'name'）.innerHTML=“test”；

是的，我认为这会奏效。在我的例子中，我需要从Javascript中的字符串设置样式，因为它来自Ajax调用。因为这违背了我们的哲学。请记住，ReactJS使用shadowdom来获取应用于实际DOM的diff。InnerHTML可能会导致漏洞和性能问题。@MichaelCzolko这是因为某些样式来自JSON提要，需要在呈现之前与其他样式属性合并。我不认为这违背了React的理念-这与使用常规方法创建样式没有什么不同。感谢您的解释：）对不起DV，但尽管我不同意他在这里试图做的事情/要求，但类名并不是试图合并任意样式的解决方案/替代品。在合并之前，他是否应该找到一种方法将其转换为样式表或其他东西？可能在那之前，这个解决方案不会有任何帮助。是的，我想我在回答之前没有准备好OP问题：）