gpt4 book ai didi

javascript - 添加内联样式以使用react

转载 作者:搜寻专家 更新时间:2023-10-31 21:59:02 27 4
gpt4 key购买 nike

目前我正在使用 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 移动到一边,而边栏不在它的左边;它在上面。我也尝试过许多带有 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 属性 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'}}>

关于javascript - 添加内联样式以使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31972552/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com