滾動反應

Question

我有一個React div標籤，其中實際上包含json樹。問題是水平滾動溢出x不起作用。我發佈代碼和錯誤below.Is有任何方法水平滾動使用css在react.Vertical滾動自動工作，如果只是溢出：'滾動'給出。

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 | render（）{ 37 |常量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>; 
}