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

Question

这是我的代码：

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


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

这个想法是“你好”应该在一个盒子里。

相反，我得到的是一个没有框的 web 页面，只有一个你好。

请帮忙。

Answer 1

将className更改为style ，并将box in 变为真实的 object。

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


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