<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/react-virtualized/styles.css">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="example">
      <!-- This element's contents will be replaced with your code... -->
    </div>
    <script src="script.js"></script>
  </body>

</html>

var AutoSizer = ReactVirtualized.AutoSizer;

class TestComponent extends React.Component<undefined, undefined> {
  render() {
    return (
      <div>
        {this.props.someMessage}
      </div>
    );
  }
}

class ComponentA extends React.Component<undefined, undefined> {
  render() {
    let autoSizerMessage1 = "Hello from AutoSizer 1";
    let testComponent2Props = {
      someMessage: "Hello from AutoSizer 2"
    };
    
    return (
      <div>
        <div>
          AutoSizer 1: 'someMessage' property passed explicitly 
          <AutoSizer someMessage={autoSizerMessage1}>  
            {this.renderTestComponentWithNoProps}
          </AutoSizer>
        </div>
        <br/>
        
        <div>
          AutoSizer 2: 'someMessage' property passed via spread operator
          <AutoSizer {...testComponent2Props}>  
            {this.renderTestComponentWithNoProps}
          </AutoSizer>
        </div>
        <br/>
        
        <div>
          AutoSizer 3: 'someMessage' property pass both explicitly and via the test components own props
          <AutoSizer someMessage="Hello from AutoSizer 3">  
            {this.renderTestComponentWithOwnProps}
          </AutoSizer>
        </div>
        <br/>
      </div>
    );
  }
  
  renderTestComponentWithNoProps(dims: Dimensions) {
    const { width, height } = dims;

    return (
      <TestComponent />
    );
  }
  
  renderTestComponentWithOwnProps(dims: Dimensions) {
    const { width, height } = dims;

    let testComponentProps = {
      someMessage: "Here is a message supplied via own props"
    }

    return (
      <TestComponent {...testComponentProps}/>
    );
  }
  
}

// Render
ReactDOM.render(
  <div>
    <ComponentA />
  </div>,
  document.getElementById('example')
);
.List {
  border: 1px solid black;
  box-sizing: border-box;
}
.Row {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  box-sizing: border-box;
}