如何使用JSX / HTML5设置图像位置？

Question

这是一个非常简单的问题，但是我无法确定最干净的东西，也无法使其真正起作用。我在reactJS类中有此JSX部分，并想通过prop-value动态设置位置。我应该在以下代码段中添加哪个标记属性？我看过带有样式的示例，并尝试将左右设置等都没有成功。

任何帮助表示赞赏。

<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />

Answer 1

JSX是一种先驱语法，它将本质上创建一堆React.createElement函数调用，并将正确的元素/组件传递给不同的调用。因此，您不必为React.createElement('div', props, children)要创建的每个容器/组件/标记做任何事情。好处是，您可以返回易于阅读和理解但比大量嵌套函数调用更熟悉和易于编写的组件标记。

但是，常规HTML和JSX之间有一些关键区别。其中大多数源于带有JavaScript保留字的冲突：

• 一些属性采用驼峰命名和命名略有不同，例如htmlFor（与相对for）
• 样式通过外部JSX表达式作为对象传递给样式属性 {{}}
• 如果大多数css名称使用连字符，则会有所不同，但大多数只是驼峰命名。因此：marginLeft，paddingRight等等
• 您可以传递风格道具，就像传递其他道具一样；它们只是直接进入您为组件/元素创建的样式对象。
• 除了遵循aria规范的属性（aria-等），将不会呈现自定义属性（使用连字符创建）

因此，考虑到这一点，您的图像组件可能看起来像这样：

<img onClick={this.handleKeyPress} 
   src="/image/1" 
   alt="HTML5" 
   style={{width: 200, height: 200, position: 'absolute', top: this.props.top, left: this.props.left}}/>

也可以看看：

• https://facebook.github.io/react/docs/dom-differences.html
• https://facebook.github.io/react/docs/jsx-gotchas.html