Question

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';
  const styleRed = {backgroundColor : 'red'};
  return (
    <div style="{styleRed}">
      {name}
    </div>
  );
 }
}

export default App;

那是我的代码，我正确地编写了样式对象，但仍在争论。为什么会发生这种情况：“例如，使用JSX时，样式= {{marginRight：间距+'em'}}。”。我的代码看起来像这样，但是反驳了。

Answer 1

尝试从样式道具中删除“”。 https://codesandbox.io/s/6j91o6z56w

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';
  const styleRed = {backgroundColor : 'red'};
  return (
    <div style={styleRed}>
      {name}
    </div>
  );
 }
}

Answer 2

我们希望对您有帮助。

从'react'导入React，{组件};

class App extends Component {
  render() {
  const name = 'Red Header';
  const styleRed = {backgroundColor : 'red'};
  return (
    <div style={styleRed}>
      {name}
    </div>
  );
 }
}

export default App;

or 

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';

  return (
    <div style={{backgroundColor : 'red'}}>
      {name}
    </div>
  );
 }
}

export default App;

style道具需要从样式属性到值而不是字符串的映射

2 个答案: