reactjs непризнанные атрибуты тегов

TLDR:reactjs непризнанные атрибуты тегов

Есть ли способ принудительно добавить атрибут к тегу реакции?

Полная история:

Я использую reactjs и я столкнулся с проблемой с SVG и foreignObjects.

Я хотел центрировать текст в SVG-изображении, поэтому я решил, что самым простым подходом было бы использование div в постороннем объекте.

Он отлично работает на хроме, но в 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-

в, но префикс остается в браузере.

Я также попытался установить необходимые функции с помощью стиля = {...}, но тогда это было внутри строки стиля и не было вставлено как атрибут тега.

Код ответа: Импорт Реагировать, {Компонент, 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>) 
    }

источник

2016-04-01 Brad

ЧАСТИЧНЫЙ ОТВЕТ: Я не был в состоянии получить текст в foreignObject работать с реагировать светлячок, но я сделал работу, как установить атрибуты «произвольного» тега.

Для каждого из реагирующих компонентов я назначенных рефов, т.е .:

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

Это фактически нарушил посторонний предмет в хромовой и светлячок !!

Я думаю, что проблема в том, что я иду по 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>

Но так как вы не можете использовать <body> тег внутри среагировать компонента, это Безразлично» t получить визуализированный.

Я вручную отредактирую код в firefox и посмотрю, исправляет ли это включение <body> в постороннем объекте.

Я думаю, что единственный вариант, который у меня есть, - это сложить второй компонент SVG поверх первой, а затем использовать setInnerHTMLDangerously для записи всех посторонних объектов внутри. Такой грязный хак!

источник

2016-04-01 04:46:27 Brad

reactjs непризнанные атрибуты тегов

ответ

Смежные вопросы