我正在尝试在 React 中创建一个盒子，但它不起作用

Question

Here is my code:

   class Landing extends Component {
  state = {
    box: " width: 300px , height: 100px, border: 1px solid blue; ",
  };


  render() {
    return <div className={this.state.box}>Hello</div>;
  }
}

The idea is that "Hello" should be inside a box.

Instead, what I am getting is a web page with no box, just a hello.

Please help.

Answer 1

Change className to style and turn box in to a real object.

class Landing extends Component {
  state = {
    box: {width: '300px', height: '100px', border: '1px solid blue'},
  };


  render() {
    return <div style={this.state.box}>Hello</div>;
  }
}