2016-03-25 18 views
3

これは非常に簡単な質問ですが、私は何が最もクリーンで、実際に動作させるのかを判断することはできません。私はこのJSX-partをreactJSクラスに持っており、prop-valueを通じて動的に位置を設定したいと考えています。次のコードスニペットにどのタグ属性を追加する必要がありますか?私はスタイルで例題を見て、左利きなどを成功させずに設定しようとしました。JSX/HTML5で画像の位置を設定する方法は?

何か助けていただければ幸いです。

<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" /> 

答えて

3

JSXは、本質的に作成されますprepocessor構文ですReact.createElement機能の束は、右の要素/コンポーネントを呼び出します別の呼び出しに渡されました。したがって、作成するマークアップのすべてのコンテナ/コンポーネント/部分に対してReact.createElement('div', props, children)を実行する代わりに。これは、読んだり理解しやすいものの、ネストされた関数呼び出しよりも使い慣れた、使いやすいコンポーネントマークアップを返すことができるという点です。

ただし、通常のHTMLとJSXにはいくつかの重要な違いがあります。

  • スタイルをオブジェクトとしてスタイルプロパティに渡されます(forとは反対に)いくつかの属性がhtmlForのように、少し異なるcamelCase形式と命名されている

    • :それらのほとんどは/ JavaScriptの予約語wの衝突から生じます外部JSX式{{}}
    • ハイフンを使用するとほとんどのCSS名が異なりますが、ほとんどの場合はcamelCasedを取得します。したがって、marginLeftpaddingRight、など
    • あなたは他の小道具と同じようにスタイル小道具を渡すことができます。コンポーネント/要素用に作成したスタイルオブジェクトに入るだけです。 (ハイフンを使用して作成)
    • カスタム属性は、(など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}}/> 
    

    も参照してください:このような

  • 1

    あなたのスタイルをダブル中括弧を使用するか、クラスを使用していることを確認してください:

    <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" /> 
    
    +0

    私は現在の位置に追加できますか?左、右の属性で? – stian

    +0

    はい、スタイルを使用すると、他のHTML要素と同じように要素を配置できます。 –

    +0

    私は、彼がもう少し詳しく説明したように、とにかく、あなたのおかげです。 – stian

    関連する問題