来自滚动滚动的自定义样式

Question

我在我的react应用程序中使用引导导航标头。我想在固定的导航标题中实现自定义scrollspy。

/* This is index.js  or container where all the component will get imported */

import React from 'react';
import SectionA from './component/sectionA';
import SectionB from './component/sectionB';
import SectionC from './component/sectionC';
export default class Index extends React.Component {
	render() {
		return (
			<div>
				<div>
					<NavigationHeader />
				</div>
				<div id="section1">
					<SectionA />
				</div>
				<div id="section2">
					<SectionB />
				</div>
				<div id="section3">
					<SectionC />
				</div>
			</div>
		);
	}
}


/* This is NavigationHeader.js this is in the component */

import React from 'react';

export default class NavigationHeader extends React.Component {
	render() {
		return (
			<div>
				<nav class="navbar navbar-inverse">
				  <div class="container-fluid">
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span> 
				      </button>
				      <a class="navbar-brand" href="#">WebSiteName</a>
				    </div>
				    <div class="collapse navbar-collapse" id="myNavbar">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">Home</a></li>
				        <li><a href="#">Section A</a></li>
				        <li><a href="#">Section B</a></li> 
				        <li><a href="#">Section C</a></li> 
				      </ul>
				    </div>
				  </div>
				</nav>
			</div>
		);
	}
}


/* This is SectionA.js this is in the component */

import React from 'react';

export default class SectionA extends React.Component {
	render () {
		return (
			<div
				style={{
					height: '500px',
				}}
			>
				Hi This is sectioA 
			</div>
		);
	}
}

/* This is SectionB.js this is in the component */

import React from 'react';

export default class SectionB extends React.Component {
	render () {
		return (
			<div
				style={{
					height: '500px',
				}}
			>
				Hi This is sectionB 
			</div>
		);
	}
}

/* This is SectionC.js this is in the component */

import React from 'react';

export default class SectionC extends React.Component {
	render () {
		return (
			<div
				style={{
					height: '500px',
				}}
			>
				Hi This is sectionC 
			</div>
		);
	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我面临的问题是，我的导航标题是Index.js的子组件，而所有其他部分也是Index.js的子组件。 使用这种结构是否有可能做到这一点？否则我必须更改结构。