contenteditable属性をhtmlに渡すにはどうすればいいですか？

Question

contenteditable属性を使用してコンテンツを編集可能にしたいと考えています。しかし、それを私のコンポーネントに追加すると、どこにも見つかりません。

class CompName extends React.Component { 
    render() { 

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

文字列としてtrueを試してみます。ここに根本的な何かが欠けていますか？私はかなり反応しています。

私はreact-rails gemを使用しています。

Answer 1

：

JSXはHTMLよりもJavaScriptに近いので、DOMではなくHTMLの属性名の命名規則camelCase プロパティを使用し反応します。 例えば、classはJSXにclassNameなり、tabindexは tabIndexなります。あなたはcontentEditable={true}を使用する必要が

：

class CompName extends React.Component { 
    render() { 

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

はとcontenteditable HTML要素を試していないが、まだ反応するが、私は、あなたがそれらを使用する方法に応じて、あなたが任意の更なる更新せずにいくつかの問題が発生します想像できますあなたのコンポーネントのロジック。

Answer 2

あなたはcontenteditableとしてcontentEditableとして渡す必要があります。 これはhtmlではなく、JSXです。属性を渡しな​​がらJS規約に従うべきです。 reactjs docsから

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