Question

React 中的滚动

2017-06-13

104675

reactjs scroll

我下面有一个 React div 标签，它实际上保存了 json 树。问题是水平滚动的 overflow-x 不起作用。我在下面发布了代码和错误。有没有办法在 React 中使用 css 进行水平滚动。如果仅给出 overflow: '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>

strong text tag(parent) overflow-x 如果给出，则会出现以下错误。

./src/Drag.js 语法错误：意外的标记，预期为，（38:16）

36 | render() { 37 | const divStyle={

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

Answer 1

请记住， divStyle 是一个对象，并且对象键与其他标识符名称（例如函数名称等）一样，不能有破折号/连字符，除非该键以字符串文字形式写出。

但是，React 仅识别 CamelCase 版本，因此请改用该版本：

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

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

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>;
}

Answer 2

尝试这个：

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

它工作正常。

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