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

Question

这是一个非常简单的问题，但我无法决定什么是最干净的，也无法真正让它发挥作用。我在 reactJS class 中有这个 JSX 部分，并且想通过 prop-value 动态设置位置。我应该将哪个标签属性添加到以下代码片段中？我见过有风格的例子，并尝试设置左右等但没有成功。

感谢任何帮助。

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

Answer 1

确保在样式上使用双花括号或使用 class:

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

Answer 2

JSX 是一种预处理器语法，它本质上会创建一堆 React.createElement 函数调用，并将正确的 elements/components 传递给不同的调用。因此，不要为每个要创建的 container/component/piece 标记执行 React.createElement('div', props, children)。好处是您可以 return 易于阅读和理解的组件标记，但感觉比大量嵌套函数调用更熟悉且更易于编写。

不过，常规 HTML 和 JSX 之间存在一些关键差异。其中大部分源于与 JavaScript 保留字的冲突：

一些属性采用驼峰式命名，并且命名略有不同，例如 htmlFor（与 for 相对）
style 通过外部 JSX 表达式 {{}}
如果使用连字符，大多数 css 名称会有所不同，但大多数只是采用驼峰式命名。所以：marginLeft、paddingRight，依此类推
您可以像传递其他道具一样传递样式道具；它们直接进入您为 component/element.
除了那些遵循 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}}/>

另请参阅：

Answer 3

在 JSX ES6 中，在组件中使用图像之前需要导入图像，或者使用 src 标签和 require 后跟图像路径在圆括号内全部在 花括号 内。您可以使用样式标签后跟双花括号来设置图像属性。不需要给双引号或单引号。

您的图像组件可能看起来像这样：

<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: 200, height: 200 }} />

您还可以使用道具或状态值来定义样式标签之间的图像属性。在使用它之前不要忘记设置状态值。您可以直接通过 props 或通过函数设置状态值。

这看起来像这样（使用状态值）：

<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.state.width, height: this.state.height }} />

或看起来像这样（直接通过道具）：

<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.props.width, height: this.props.height }} />

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

how to set the image position with JSX/HTML5?

reactjs

react-jsx