添加内联样式来响应

Adding inline styles to react

本文关键字：响应 样式 添加      更新时间：2023-09-26

目前我正在使用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作为react存储的地方。不幸的是，这不起作用，然而，因为它只是移动map-canvas到一边，而侧边栏不是它的左边;它在上面。我已经尝试了许多不同的组合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根本不显示。我很困惑我应该尝试什么，但react似乎不想与其他div元素玩得很好。

这是因为在React中，style prop采用对象而不是分号分隔的字符串。

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

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>
    );
  }
}
相关文章：