reactjs无法识别的标签属性答案

【问题标题】：reactjs unrecognized tag attributesreactjs无法识别的标签属性
【发布时间】：2016-07-20 17:09:42
【问题描述】：

TLDR：

有没有办法强制将属性附加到反应标签？

全文：

我正在使用 reactjs，但遇到了 SVG 和 foreignObjects 的问题。

我想将文本在 SVG 图像中居中，所以我认为最简单的方法是在外来对象中使用 div。

它在 chrome 上运行良好，但在 Firefox 中不显示文本。

仔细观察，我的

requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
requiredExtensions="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2000/svg"

没有进入浏览器。

我已经阅读了建议放置前缀的 reactjs 文档

data-

in，但前缀保留在浏览器中。

我也尝试使用 style={...} 设置所需的功能，但后来这是在样式字符串中，而不是作为标记属性插入。

反应代码：从 'react' 导入 React, {Component,PropTypes};

export default class myComponent extends Component {
    render() {
        return (<svg width = {this.props.width}
            height = {this.props.height}>
            <foreignObject x = {0} y = {0}
            width = {this.props.width}>
            <div> <p> {this.props.title} </p> </div > </foreignObject> 
        </svg>)
    }

【问题讨论】：

标签： svg reactjs

【解决方案1】：

部分答案：我无法在foreignObject中获取文本以在firefox中使用react，但我确实研究了如何设置“任意”标签属性。

对于我分配 refs 的每个反应组件，即：

<div style={divStyle} ref="d2">
  <p style={{wordWrap: 'normal', textAlign: 'left', margin: 'auto', position: 'relative'}} key="p2">
    {Math.round(this.props.kW)} W
  </p>
</div>

然后在componentdidmount中：

  componentDidMount() {
    this.refs.svg1.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    this.refs.svg1.setAttribute('version', '1.2');
    this.refs.fo1.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
    this.refs.d1.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
    this.refs.fo2.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
    this.refs.d2.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
    this.refs.fo3.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
    this.refs.d3.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
    this.refs.fo4.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
    this.refs.d4.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
    this.refs.fo5.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
    this.refs.d5.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
    this.refs.fo6.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
    this.refs.d6.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
  }

这实际上破坏了chrome和firefox中的异物！！

我认为问题在于我正在路过 https://www.w3.org/TR/SVG/extend.html

他们有：

<body xmlns="http://www.w3.org/1999/xhtml">
    <p>Here is a paragraph that requires word wrap</p>
</body>

但是由于你不能在 react 组件中使用 <body> 标签，所以它不会被渲染。

我将在 Firefox 中手动编辑代码，看看在外来对象中包含 <body> 是否可以解决此问题。

我认为我唯一的选择是在第一个 SVG 组件的顶部放置第二个 SVG 组件，然后使用 setInnerHTMLDangerously 将所有外来对象写入其中。这么肮脏的黑客！！

【讨论】：