Comment ajouter un menu déroulant à mon application React?

Question

Je construis une application en utilisant facebook réagir de:

https://github.com/facebookincubator/create-react-app

le long w SASS: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

Je suis maintenant à un point où je dois ajouter un menu déroulant à l'en-tête. Similaire aux icônes d'en-tête sur StackOverflow en haut à droite qui s'ouvrent et se ferment en cliquant. Je sais que cela ressemble à une question stupide, mais quelle est la bonne façon de le faire? Ai-je besoin d'ajouter un framework UI comme un bootstrap pour quelque chose comme ça? Je n'ai pas besoin de tout le bootstrap theming etc ...

Merci - et s'il vous plaît être aimable à la question posée je suis un développeur solo et pourrait vraiment utiliser un peu d'aide à la construction d'une base solide sur mon application.

Merci

Answer 1

vous pouvez utiliser react-select comme ceci:

var Select = require('react-select'); 

var options = [ 
    { value: 'one', label: 'One' }, 
    { value: 'two', label: 'Two' } 
]; 

function logChange(val) { 
    console.log("Selected: " + JSON.stringify(val)); 
} 

<Select 
    name="form-field-name" 
    value="one" 
    options={options} 
    onChange={logChange} 
/> 

https://github.com/JedWatson/react-select

aussi cette bibliothèque:

https://www.npmjs.com/package/react-dropdown

Answer 2

On dirait que votre projet est encore dans son INFA ncy. Et que vous souhaitez intégrer une bibliothèque à votre projet. Donc, je vous recommande vraiment de choisir une bibliothèque dès maintenant. Avec React, vous pouvez créer votre propre menu sans trop d'efforts. Mais vous aurez également besoin d'autres composants pour le reste de votre application. Et la qualité de votre menu (et d'autres composants) sera probablement plus grande si vous choisissez une bibliothèque utilisée par beaucoup (plutôt que la vôtre). Pour la "qualité", je veux dire: conception UX, normes HTML, réutilisabilité API, nombre de défauts, etc.

Si vous pensez que votre application sera petite et n'aura pas besoin d'un cadre d'interface utilisateur entier, vous pouvez rechercher un composant isolé pour le menu.Voici une liste des composants de navigation (y compris le nombre d'étoiles GitHub de chaque projet): https://devarchy.com/react/topic/navigation

Mais dans la plupart des cas, je choisirais un cadre de l'interface utilisateur toute la place: https://devarchy.com/react/topic/ui-framework

Et voici quelques démos du Menu/navigation/app-bar de certains cadres de l'interface utilisateur populaires:

• https://ant.design/components/menu/
• https://react-bootstrap.github.io/components.html#navs-dropdown
• http://www.material-ui.com/#/components/app-bar

Answer 3

Oui, vous pouvez le faire facilement avec juste React:

class Hello extends React.Component { 
 
    render() { 
 
    return <div className="nav"> 
 
     <Link /> 
 
     <Link /> 
 
     <Link /> 
 
    </div>; 
 
    } 
 
} 
 

 
class Link extends React.Component { 
 
\t state = { 
 
    \t open: false 
 
    } 
 
    handleClick =() => { 
 
    \t this.setState({ open: !this.state.open }); 
 
    } 
 
    render() { 
 
    \t const { open } = this.state; 
 
    \t return (
 
    \t <div className="link"> 
 
    \t <span onClick={this.handleClick}>Click Me</span> 
 
     <div className={`menu ${open ? 'open' : ''}`}> 
 
      <ul> 
 
      <li>Test 1</li> 
 
      <li>Test 2</li> 
 
      <li>Test 3</li> 
 
      </ul> 
 
     </div> 
 
    \t </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Hello name="World" />, 
 
    document.getElementById('container') 
 
);

.nav { 
 
    display: flex; 
 
    border-bottom: 1px solid gray; 
 
    background: white; 
 
    padding: 0 10px; 
 
} 
 

 
.link { 
 
    width: 100px; 
 
    border-right: 1px solid gray; 
 
    padding: 10px; 
 
    text-align: center; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.menu { 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 40px; // same as your nav height 
 
    left: 0; 
 
    background: #ededed; 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
    text-align: center; 
 
    transition: all 1000ms ease; 
 
} 
 

 
.menu.open { 
 
    opacity: 1; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
}

<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> 
 
<div id="container"></div>