如何将 contenteditable 属性传递给 html？

Question

我想使用 contenteditable 属性使内容可编辑。但是当我将它添加到我的组件时 - 它无处可寻。

class CompName extends React.Component {
  render() {

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

也尝试使用 true 作为字符串。我在这里错过了一些基本的东西吗？我是 React 的新手..

我正在使用 react-rails gem.

Answer 1

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

https://facebook.github.io/react/docs/dom-elements.html

Answer 2

来自reactjs docs：

Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex.

你必须使用 contentEditable={true}:

class CompName extends React.Component {
  render() {

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

还没有尝试过 contenteditable html 有反应的元素，但我可以想象，根据你想如何使用它们，你会遇到一些问题，而你的组件中没有任何进一步的更新逻辑。

如何将 contenteditable 属性传递给 html？

How to pass contenteditable attribute to html?

contenteditable

reactjs

react-rails