reactjs unerkannte Tag-Attribute

Gibt es eine Möglichkeit, ein Attribut an ein react-Tag anzuhängen?

Die ganze Geschichte:

Ich verwende reactjs und ich habe ein Problem mit SVG und foreignObjects laufen.

Ich wollte Text in einem SVG-Bild zentrieren, also dachte ich, der einfachste Ansatz wäre, ein div in einem fremden Objekt zu verwenden.

Es funktioniert gut auf Chrom, aber in Firefox wird der Text nicht angezeigt.

Bei näherer Betrachtung scheint es, dass meine

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

nicht an den Browser kommt.

Ich habe die reactjs docs lesen, die das Präfix

data-

in, aber das Präfix bleibt im Browser vorgeschlagen setzen.

Ich habe auch versucht, die erforderlichen Features mit dem Stil = {...} festlegen, aber dann war dies innerhalb der Stilzeichenfolge und nicht als Tag-Attribut eingefügt.

Reaction Code: importieren Reagieren, {Component, PropTypes} von 'reagieren';

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

Quelle

2016-04-01 Brad

PARTIAL ANTWORT: Ich habe nicht in der Lage gewesen, Text in einem foreign zu bekommen reagiert in Firefox zu arbeiten, aber ich habe herausfinden, wie ‚willkürliche‘ Tag-Attribute.

Für jede der Komponenten reagieren i Refs zugeordnet, d.h .:

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

Dann in 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'); 
    }

Dieses brach tatsächlich die Fremdkörper in beiden Chrome und Firefox !!

Ich denke, das Problem ist, dass ich von gehe https://www.w3.org/TR/SVG/extend.html

und sie haben:

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

Aber da Sie nicht die <body> Tag innerhalb einer reagieren Komponente verwenden können, diese doesn‘ t gerendert werden.

Ich werde den Code in Firefox manuell bearbeiten und sehen, ob die Aufnahme von <body> in das Fremdobjekt dieses Problem behebt.

Ich denke, die einzige Option, die ich habe, ist eine zweite SVG-Komponente über die Spitze der ersten Schicht dann setInnerHTMLDangerously zu schreiben, um alle der fremden Objekte innerhalb zu schreiben. So ein dreckiger Hack !!

Quelle

2016-04-01 04:46:27 Brad

reactjs unerkannte Tag-Attribute

Antwort

Verwandte Themen