javascript - Adding inline styles to react - Stack Overflow

admin管理员组

文章数量:1180531

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.

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.

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Mar 13, 2019 at 15:38 brooksrelyt 4,02566 gold badges3535 silver badges5757 bronze badges asked Aug 12, 2015 at 18:15 Benjamin ChuBenjamin Chu 17111 gold badge33 silver badges77 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 29

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

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

本文标签： javascriptAdding inline styles to reactStack Overflow