пользовательский стиль от scrollspy в реакции - PullRequest
Новая
       8

пользовательский стиль от scrollspy в реакции

0 голосов
/ 29 октября 2018

Я использую заголовок начальной загрузки в одном из моих приложений реагирования. Я хочу реализовать пользовательский 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. Можно ли сделать это с этой структурой? или я должен изменить структуру.

...