添加内联样式以做出反应 [英] Adding inline styles to react

问题描述

当前，我正在使用react.js，并且试图使两个div并排.目前我正在尝试

Currently I'm using react.js and I'm trying to get two div's to be side by side. Currently I'm trying to

<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作为反应存储的位置.不幸的是，这不起作用，因为它只是将地图画布移动到侧面，而侧边栏不在左边.其顶部.我也尝试了很多带有浮动功能的组合，但它们似乎都不起作用

with sidebar.js as the where react is stored. This unfortunately doesnt work however as it just moves map-canvas to the side while sidebar isn't to the left of it; its on top. I've tried many various combinations w/ float as well and none of them seem to work

另一种选择是编辑我当前所在的sidebar.js代码

Another option is to edit the sidebar.js code where I currently have

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元素配合使用.

in which I try doing return <div style ="display: inline-block;"> However, in this case the generated html doesnt show up at all. I'm perplex to what I should try but react seems like it doesnt want to play nice with other div elements.

推荐答案

这是因为在React中， style 道具

That's because in React, the style prop takes an object instead of a semicolon-separated string.

<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'}}>

这篇关于添加内联样式以做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！