当改变反应组分的含量时，按钮移动位置

Question

以下是jsfiddle中演示的问题。

我有一些部分可以在单击按钮时更改内容。我希望按钮保持原位，以便用户可以继续点击相同的位置来更改内容。我可以将身高改为任意大的数字而且没有问题，但我无法知道最高可能的高度，也不想浪费空间。

HTML：

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js">
</script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Javascript：

class Modules extends React.Component {
constructor(props) {
    super(props);

    let sections = [];

    let firstSection = [
        { title: "section 1, page 1", body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus massa, gravida id mattis quis, pellentesque at ante. Mauris pellentesque, ligula laoreet lacinia interdum, orci dolor bibendum elit, et fringilla magna orci sit amet ipsum. Vivamus vel lacus tristique, blandit lectus vel, lobortis odio." },
        { title: "section 1, page 2", body: "In tincidunt, erat eget venenatis interdum, neque dolor lobortis neque, vel mollis purus lacus ut orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras non dictum risus. Ut id augue in ex sollicitudin blandit vitae quis libero. Quisque hendrerit imperdiet imperdiet. Curabitur pretium nulla in augue feugiat sagittis. Vestibulum lacinia, ex ac luctus bibendum, dolor eros finibus elit, sed finibus massa orci eget tortor." },
        { title: "section 1, page 3", body: "Integer dapibus nibh in ex pellentesque condimentum. Aliquam erat urna, imperdiet at nunc ut, dictum convallis nunc. Sed pretium nunc eu augue eleifend gravida. Nulla ligula metus, vehicula ut fermentum vitae, accumsan vel odio. Vestibulum rhoncus pharetra nisl, eget volutpat nibh." }
    ];

    let secondSection = [
        { title: "section 2, page 1", body: "Curabitur pretium nulla in augue feugiat sagittis. Vestibulum lacinia, ex ac luctus bibendum, dolor eros finibus elit, sed finibus massa orci eget tortor. In placerat justo et dolor lobortis, laoreet molestie diam commodo. Pellentesque sit amet justo turpis. Morbi nulla nibh, luctus quis elit sit amet, convallis facilisis erat. Sed at malesuada justo. Fusce consectetur ornare urna, nec varius est. Aliquam dictum eros iaculis ex egestas auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit." },
        { title: "section 2, page 2", body: "Vivamus vel lacus tristique, blandit lectus vel, lobortis odio." },
        { title: "section 2, page 3", body: "Nulla ligula metus, vehicula ut fermentum vitae, accumsan vel odio. Vestibulum rhoncus pharetra nisl, eget volutpat nibh." }
    ];

    //add each section
    sections.push(firstSection);
    sections.push(secondSection);


    this.state = {
        currentPage: sections.map(section => 0),
        sections: sections
    };
}

changeToSectionToRight(index) {
    if(this.state.currentPage[index] < this.state.sections[index].length - 1)                 
    {
      this.state.currentPage[index]++;
      this.setState(this.state);
    }
}

changeToSectionToLeft(index) {
    if(this.state.currentPage[index] > 0) {
      this.state.currentPage[index]--;
      this.setState(this.state);
    }
}

render() {
    let sectionsArray = this.state.sections.map((content, index) => {
        return <div className="default-label">
                    <button onClick={this.changeToSectionToLeft.bind(this, index)}>&larr;</button>
                    <div className="module-body">
                        <p><b>{content[this.state.currentPage[index]].title}</b></p>                                    {content[this.state.currentPage[index]].body}
                    </div>
                    <button onClick={this.changeToSectionToRight.bind(this, index)}>&rarr;</button>
             </div>
    });

    return <div>
        {sectionsArray}
     </div>;
  }
}

React.render( <Modules/> , document.getElementById('container'));

CSS：

body {
/*setting to tall enough height 'fixes' the issue*/
  /*height: 2400px;*/
}

.default-label {
  display: flex;
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
  width: 250px;
}

.module-body {
  padding: 10px;
}

button {
  height: 20px;
}