Question

这是一个非常简单的问题，但我无法确定什么是最干净的，也无法让它发挥作用。我在reactJS类中有这个JSX-part，并希望通过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保留字冲突的冲突：

某些属性是camelCased，命名略有不同，如htmlFor（与for相对）
style通过外部JSX表达式{{}}
如果使用连字符，大多数css名称都不同，但大多数只是获得camelCased。所以：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}}/>

另见：

Answer 2

确保在样式上使用双花括号或使用类：

<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 3

在JSX ES6中，需要先导入图像，然后才能在组件中使用图像，或者在 require 中使用 src 标记并在大括号。您可以通过在样式标签后加上双花括号来设置图片属性。不需要使用双引号或单引号。

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

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

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

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

<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设置图像位置？

3 个答案: