Question

我需要快速帮助。我正在使用非JSX语法的ReactJS，因为我觉得使用它比JSX更舒服

我可以轻松创建一个div，但我不知道如何在纯html中包含样式标记;例如：<div class="some-name-here" style="some-style-here"......</div>

以下是代码：

var DOMstyle = {
  backgroundColor: 'blue',
  width : 100
};


let Header = class Header extends Component {
  render() {
    return(
      React.createElement('div', {className : 'header'}, "hello",
      )
    );
  }
};

我试图将DOMstyle包含在此div中，因此浏览器会看到类似<div class="some-name-here" style="some-style-here"......</div>

的内容

任何帮助将不胜感激。

感谢。

Answer 1

您可以将自定义样式中的定义传递从javascript传递到传递给React.createElement的对象中的样式属性。

const DOMstyle = {
  borderTop: '2px solid blue',
  width : '100%',
  backgroundColor: 'red',
}

class Header extends React.Component {
  render() {
    return React.createElement('div', {className: 'header', style : DOMstyle}, "hello");
  }
};

ReactDOM.render(<Header />, document.getElementById('app'))

.header {
  font-family: 'arial';
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

结果类似于

<div class="header" style="font-family: 'arial';color:#fff;">Hello</div>

如何在使用非JSX语法时在ReactJS中使用样式标记？

1 个答案: