Reactjs 如何将contenteditable属性传递给html？

我想使用

contenteditable

属性使内容可编辑。但是当我把它添加到我的组件中时，它就不存在了

class CompName extends React.Component {
  render() {

    return (
      <div className="CompName" >
        <div contenteditable={true}>Somecontent</div>
      </div>
    );
  }
}

类CompName扩展了React.Component{
render（）{
返回(
一些内容
);
}
}

尝试将

true

用作字符串。我是不是错过了一些基本的东西？我还没有反应过来

---

我正在使用

react rails

gem。

您应该将其作为contentEditable而不是contentEditable传递。 这不是html，而是JSX。传递属性时应遵循JS约定

---

您应该将其作为contentEditable而不是contentEditable传递。 这不是html，而是JSX。传递属性时应遵循JS约定

来自：

因为JSX比HTML更接近JavaScript，所以React DOM使用

camelCase

属性命名约定，而不是HTML属性名称。对于 例如，

class

在JSX中变为

className

，而

tabindex

变为

tabIndex

您必须使用

contentEditable={true}

：

class CompName extends React.Component {
  render() {

    return (
      <div className="comp-name" >
        <div contentEditable={true}>Somecontent</div>
      </div>
    );
  }
}

类CompName扩展了React.Component{
render（）{
返回(
一些内容
);
}
}

尚未使用react尝试

contenteditable

html元素，但我可以想象，根据您希望如何使用它们，您将遇到一些问题，而无需进一步更新组件中的逻辑。

来自：

因为JSX比HTML更接近JavaScript，所以React DOM使用

camelCase

属性命名约定，而不是HTML属性名称。对于 例如，

class

在JSX中变为

className

，而

tabindex

变为

tabIndex

您必须使用

contentEditable={true}

：

class CompName extends React.Component {
  render() {

    return (
      <div className="comp-name" >
        <div contentEditable={true}>Somecontent</div>
      </div>
    );
  }
}

类CompName扩展了React.Component{
render（）{
返回(
一些内容
);
}
}

---

还没有尝试过使用react的

contenteditable

html元素，但我可以想象，根据您希望如何使用它们，您将遇到一些问题，而无需进一步更新组件中的逻辑。

它起作用了。。所以react知道所有可能的html属性？因此，它只允许这些吗？@Aurimas是的。获取受支持属性的列表。成功了。。所以react知道所有可能的html属性？因此，它只允许这些吗？@Aurimas是的。获取受支持属性的列表。