web-dev-qa-db-ja.com

反応するインラインスタイルを追加する

現在、react.jsを使用しており、2つの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を使用します。これは残念ながら機能しませんが、サイドバーが左側にないのにマップキャンバスを横に移動するだけです。その上に。私はフロート付きの多くのさまざまな組み合わせも試しましたが、どれも機能しないようです

別のオプションは、私が現在持っている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要素でNiceを再生したくないように反応します。

javascripthtmlcssreactjs
7
Benjamin Chu

これは、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'}}>
19
Michael Parker
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>
    );
  }
}
1
fgseneres