Reactでスクロール

Question

私は実際にjsonツリーを保持するReact divタグを持っています。水平スクロールのoverflow-xが問題になりません。私はコードとエラーbelow.Isを投稿しています水平スクロールのための反応をCSSを使用しています。垂直スクロールは、単なるオーバーフロー：自動的に動作している場合、 'スクロール'が与えられます。

const divStyle={ 
     overflow-y: 'scroll', 
     border:'1px solid red', 
     width:'500px', 
     float: 'left', 
     height:'500px', 
     position:'relative' 
     }; 

<div style={divStyle}> 
        <Droppable 
         types={['yolo']} 
         style={droppableStyle} 
         onDrop={this.onDrop.bind(this)} 
         onDragEnter={this.onDragEnter.bind(this)} 
         onDragLeave={this.onDragLeave.bind(this)}> 
         <div style={{textAlign:'left', lineHeight:'100px' ,overflow:'scroll'}}>{this.state.dropped}</div> 
        </Droppable> 
       </div> 

強いテキスト タグ（親）オーバーフローX与えられた場合には、以下のようにエラーを返します。

./src/Drag.js 構文エラー：予想予期しないトークン、（38:16）

36 |レンダリング（）{ 37 | CONST divStyle = {

38 | overflow-y: 'scroll', | ^ 39 | border:'1px solid red', 40 | width:'500px', 41 | float: 'left',

Answer 1

はdivStyleキーが文字列リテラルとして記述されない限り、そのような関数名、等のような他の識別子名は、ダッシュ/ハイフンを持つことができないだけのように、オブジェクトとオブジェクトのキーであることに注意してください。しかし

、反応しのみキャメルケースのバージョンを認識し、その代わりにすることを使用します。

const divStyle={ 
    overflowY: 'scroll', 
    border:'1px solid red', 
    width:'500px', 
    float: 'left', 
    height:'500px', 
    position:'relative' 
}; 

ここofficial Reactjs docsからの抜粋です：

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

const divStyle = { 
    color: 'blue', 
    backgroundImage: 'url(' + imgUrl + ')', 
}; 

function HelloWorldComponent() { 
    return <div style={divStyle}>Hello World!</div>; 
}