Question

我正在创建一个React组件，该组件将在表中显示一些数据。由于数据实际上是一个潜在的大矩阵，因此我想要创建一种视口，这需要我的组件具有某种方法来指定其大小。现在，我在组件用法中这样做：

<PivotGrid width="900" height="350"  dataSource={dataSource}></PivotGrid>

在组件内部，我正在执行以下操作：

    var sizeStyle = { 
                height:this.props.height+"px",
                width:this.props.width+"px"
            }
            return (
            <div style={sizeStyle} className={this.props.classes.pivotGridContainer}>
...

这是实现这种功能的预期方式吗？

Answer 1

我建议使用 styled-component 库来对React组件进行样式设置。

您的实现如下所示：

import styled from 'styled-components';
import PivotGrid from './PivotGrid';

const PivotGridWrapper = styled(PivotGrid)`
  height: ${props => props.height}px;
  width: ${props => props.width}px;
`;

const component = (props) => (
  <PivotGridWrapper 
    dataSource={dataSource}
    height="350"  
    width="900" 
  />
)

Answer 2

有很多方法可以做到，我只是喜欢这样

<PivotGrid width="900px" height="350px"  dataSource={dataSource}></PivotGrid>

class PivotGrid extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      componentSize: {width: props.width,height: props.height}
    }
  }
  render(){
    return (
      <div className="App" style={this.state.componentSize}>
        <button onClick={() => this.setState({ componentSize: { width: '400px', height: '200px'}})} >Change Component Size</button>
      </div>
    );
  }
}

如果将来要更改组件内部的组件尺寸，这也可以使用

Answer 3

让我合法。如果使用样式化的组件或JSS，则可以将width和height直接放入CSS类。另外，您还可以考虑防止在尺寸属性更改时重新渲染组件。

指定React组件大小的正确方法

3 个答案: