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中，style道具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'}}>

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

添加内联样式以作出反应

2 个答案: