Reactjs 为“保留有效的HTML标记”；render（）；用于将动态值作为属性

我正在阅读React，不愿意保留render（）函数的有效HTML标记。下面是代码片段

工作代码：

import React from "react";
export  default class Header extends React.Component {
  render () {
    const title="I am title";
    return (
      <img title={title} src="./test.png"></img>
    )
  }
}

从“React”导入React；
导出默认类标头扩展React.Component{
渲染（）{
const title=“我是title”；
返回(
)
}
}

使用有效的HTML标记时代码不起作用（标题值带双引号）：

从“React”导入React；
导出默认类标头扩展React.Component{
渲染（）{
const title=“我是title”；
返回(
)
}
}

我希望保留有效的HTML标记，以便在HTML标记出现问题时使我的开发变得容易和易于跟踪

---

有没有办法将动态属性值与双引号一起使用？

您不必关心这个问题。JSX被编译成JS语法，为您呈现HTML。我们可以将其视为HTML上的第二抽象层。 此外，HTML和React的组件实现之间存在很多差异

关闭文本区域HTML：

<textarea />

关闭文本区域JS：

<textarea></textarea>

设置属性也是一样，您将无法使其有效

但最重要的是，您应该了解它是一个抽象层。这就是为什么有些人反对JSX，因为很多人对此感到困惑。所以他们提倡使用普通的JS-using（见右部分）

---

这是一篇很好的文章。

您是否在谈论如何在代码编辑器中对代码着色？如果是这样的话，大多数编辑器中都有JSX的语法插件否，我想使用双引号，这样我就可以使用有效的HTML标记。属性值中没有双引号的HTML标记不是有效的标记。即使在双引号内，我也要读取{var_name}。这只是JSX，它将被转换为有效的HTML标记。React将为您完成这项工作，希望

title={title}

将被翻译为

title=“content\u of_var\u here”

）好的，谢谢。也许我应该写网页插件来做这个翻译。我不相信在HTML上添加图层。我的首选是在JSX中使用普通HTML。我确实很少看到“className”和“htmlFor”的网页插件，我想我可以为“{var_name}”编写单独的插件。我认为你只是走错了方向，增加了一层而没有任何优势，增加了更多的痛苦和困惑。但我部分理解你：）

<textarea></textarea>