Javascript 添加内联样式以做出反应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31972552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding inline styles to react
提问by Benjamin Chu
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
目前我正在使用 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>
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
使用 sidebar.js 作为存储 react 的位置。不幸的是，这不起作用，因为它只是将地图画布移到一边，而侧边栏不在它的左侧；它在上面。我也尝试了许多带有浮动的各种组合，但似乎没有一个有效
Another option is to edit the sidebar.js code where I currently have
另一种选择是编辑我目前拥有的 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>;
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.
我尝试这样做return <div style ="display: inline-block;">但是，在这种情况下，生成的 html 根本不显示。我对我应该尝试什么感到困惑，但 React 似乎不想与其他 div 元素一起玩。
回答by Michael Parker
That's because in React, the styleprop takes an object instead of a semicolon-separated string.
那是因为在 React 中，styleprop接受一个对象而不是分号分隔的 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'}}>
回答by fgseneres
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>
);
}
}
