在React中滚动

Question

我有一个React div标签，它下面实际上保存着json树。问题是overflow-x，因为水平滚动不起作用。我在下面发布代码和错误.react.css中有没有办法使用css进行水平滚动？如果只是溢出：给出'scroll'，则垂直滚动会自动工作。

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>

强文本 标记（父）overflow-x（如果给出）会产生以下错误。

./src/Drag.js语法错误：预期的令牌异常，（38:16）

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

38 | 溢出-y：'滚动'，| ^ 39 | 边框：“ 1px纯红色”，40 | 宽度：'500px'，41 | 向左飘浮'，

Answer 1

请记住，这divStyle是一个对象和对象键，就像其他标识符名称（例如函数名称等）一样，除非将键写为字符串文字，否则不能有破折号/连字符。

但是，react 只能识别 CamelCase 版本，因此请改用它：

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

这是来自官方 Reactjs 文档的片段：

该style属性接受具有驼峰式属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM styleJavaScript 属性一致，更高效，并防止 XSS 安全漏洞。例如：

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

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

Answer 2

尝试这个：

style={{overflowX : 'auto',fontSize: '14px'}} 用于reactjs中的内联CSS

工作正常。

所有带有破折号的样式在reactjs中都转换为驼峰大小写并删除破折号。