添加内联样式以做出反应

Question

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>

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

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>;

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.

Answer 1

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>

Edit:

So this:

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

Would become this:

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

Answer 2

const styles = {
  container: {
   backgroundColor: '#ff9900',
   ...
   ...
   textAlign: 'center'
  }
}

export default class App extends React.Component {
  render() {
    return(
      <div className="container" style={styles.container}>
      // your other codes here...
      </div>
    );
  }
}