How can I add a static or fixed Navbar to a component in React with Meteor

Question

How can I add a static or fixed Navbar to a component in React with Meteor

Navigation

#1 by (0 votes)

0

I have seen that being able to apply a fixed navbar can be applied with 'Scrollspy' of bootstrap, I found an example on this page link but when doing it with my component it is not seen in the same way, is my component the js file as I can import it into my component or is it using some method of Meteor?

this is my component

import React from 'react';


export default class NavbarBoots extends React.Component {
    render() {
        return(
        <div>

        <nav id="header" class="navbar navbar-fixed-top">
            <div id="header-container" class="container navbar-container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a id="brand" class="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        </div>
        ); // return
    };
}
NavbarBoots.reactPropType = {
    title: React.PropTypes.string.isRequired
}

and this is a fragment of code js

$(document).ready(function(){

/**
 * This object controls the nav bar. Implement the add and remove
 * action over the elements of the nav bar that we want to change.
 *
 * @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
 */
var myNavBar = {

    flagAdd: true,

    elements: [],

    init: function (elements) {
        this.elements = elements;
    },

    add : function() {
        if(this.flagAdd) {
            for(var i=0; i < this.elements.length; i++) {
                document.getElementById(this.elements[i]).className += " fixed-theme";
            }
            this.flagAdd = false;
        }
    },

javascript bootstrap reactjs meteor

asked by Gerardo Bautista 09.10.2017 в 23:49

source

1 answer

JSP File Forms OsError Python on Ubuntu

score 0 · Answer 1

In the JSX (not JS) do not use the word class , you must replace it with className in all the content of render :

render() {
    return(
    <div>
        <nav id="header" className="navbar navbar-fixed-top">
            <div id="header-container" className="container navbar-container">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <a id="brand" className="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" className="collapse navbar-collapse">
                    <ul className="nav navbar-nav">
                        <li className="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    ); // return
};