[英]Adding inline styles to react
目前我正在使用 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 作为存储反应的地方。 不幸的是,这不起作用,因为它只是将地图画布移到一边,而侧边栏不在它的左侧; 它在上面。 我也尝试了许多带有浮动的各种组合,但似乎没有一个有效
另一种选择是编辑我目前拥有的 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接受一个对象而不是分号分隔的 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'}}>
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.