添加内联样式以进行react

IT技术 javascript html css reactjs
2021-04-17 02:39:14

目前我正在使用 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的地方。不幸的是，这不起作用，因为它只是将地图画布移到一边，而侧边栏不在它的左侧；它在上面。我也尝试了许多带有浮动的各种组合，但它们似乎都不起作用

另一种选择是编辑我目前拥有的 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 元素一起玩。

2个回答

那是因为在 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>

编辑：

所以这：

return <div style="display: inline-block;">

会变成这样：

return <div style={{display: 'inline-block'}}>
抱歉，我没有说清楚，第一个代码块在 html 文档中，而第二个代码块是实际的 JSX，而不是转换后的 javascript。JSX 的内联样式与对象而不是分号分隔的字符串相同吗？
2021-06-06 02:39:14
@MichaelParker - 对我来说效果很好saturnapi.com/fullstack/inline-css-styles-hover
2021-06-15 02:39:14
我编辑了我的答案，希望让它更清楚一点。如果我理解正确，那就是您尝试添加内联样式的行。
2021-06-19 02:39:14 
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>
    );
  }
}
解释代码的作用以及它如何回答问题通常是一个很好的做法，这样其他用户也可以从中受益。
2021-06-20 02:39:14
其它你可能感兴趣的问题
上一篇AsyncStorage 数据在 Android 设备上的物理位置在哪里？ 下一篇ReactJS this.setState() 与 this.state.myvar 不同步