Question

我在下面有一个React div标签，它实际上包含了json树。问题是溢出-x水平滚动不起作用。我在下面发布代码和错误。有什么方法可以在react.vertical滚动中使用css进行水平滚动。如果只是溢出，滚动自动工作：＆＃39;滚动＆＃39;给出了。

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>

强文 tag（parent）overflow-x如果给出它会产生如下错误。

./ SRC / Drag.js 语法错误：意外的令牌，预期，（38:16）

36 | render（）{ 37 | const divStyle = {

38 |溢出y：＆＃39;滚动＆＃39;， | ^ 39 |边框：＆＃39; 1px纯红色＆＃39;， 40 |宽度：＆＃39; 500像素＆＃39 ;, 41 | float：＆＃39; left＆＃39;，

Answer 1

试试这个：

style={{overflowX : 'auto',fontSize: '14px'}}表示反应中的内联css。

工作正常。

带有短划线的所有样式都会在reactjs中转换为驼峰大小写并删除短划线。

Answer 2

请记住，divStyle是一个对象和对象键，就像其他标识符名称一样，如函数名称等，除非将键写为字符串文字，否则不能使用短划线/连字符。

但是，react只识别CamelCase版本，所以请改用：

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

以下是official Reactjs docs：

的摘录

style属性接受具有camelCased属性而不是CSS字符串的JavaScript对象。这与DOM style JavaScript属性一致，效率更高，并且可以防止XSS安全漏洞。例如：
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

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

滚动React

2 个答案: