javascript - `style` Prop 需要从样式属性到值的映射，而不是字符串

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;

那是我的代码 我正确地编写了样式对象，但 react 仍在争论中。为什么会这样 它说:

'For example, style={{marginRight: spacing + 'em'}} when using JSX.'.

我的代码看起来像上面的代码，但 React 争论不休。

Answer 1

尝试从样式 Prop 中删除“”。 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>
  );
 }
}