Question

TLDR：

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

全文：

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

我想在SVG图像中居中文本，所以我认为最简单的方法是在异物中使用div。

它在chrome上工作正常，但在firefox中不显示文本。

仔细观察，看来我的

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>)
    }

没有进入浏览器。

我已经阅读了建议使用前缀

的reactjs文档

{{1}}

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

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

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

{{1}}

Answer 1

部分答案：我无法在foreignObject中获取文本以在firefox中使用react，但我确实设法了解如何设置'arbitary'标记属性。

对于我指定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');
  }

这实际上打破了BOTH 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组件叠加在第一个上面，然后使用setInnerHTMLDangerously来编写内部的所有外来对象。这样一个肮脏的黑客!!

reactjs无法识别的标签属性

1 个答案: