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

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>