添加内联样式以作出反应

Question

目前我正在使用react.js而我正试图让两个div并排.目前我正在尝试

<div id="sidebar" style = "display:inline-block;" >
  <script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "></div>

使用sidebar.js作为存储反应的位置.不幸的是,这不起作用,因为它只是将地图画布移动到侧面而侧边栏不在其左侧; 它在顶部.我已经尝试了许多各种组合w/float,但它们似乎都不起作用

另一种选择是编辑我目前拥有的sidebar.js代码

return <div>
  <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
  <ul>
    { libraries.map(function(l){
      return <li>{l.name} </li>
    }) }
  </ul>
</div>;

我尝试做的事情return <div style ="display: inline-block;"> 然而,在这种情况下,生成的html根本不显示.我很困惑我应该尝试但反应似乎它不想与其他div元素玩得很好.

Answer 1

那是因为在React中,styleprop使用一个对象而不是一个以分号分隔的字符串.

<div id="sidebar" style={{display : 'inline-block'}} >
  <script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style={{display: 'inline-block', width: '20%', height: '50%'}}>
</div>

编辑:

所以这:

return <div style="display: inline-block;">

会变成这样的:

return <div style={{display: 'inline-block'}}>