React 앱에 드롭 다운 메뉴를 추가하는 방법은 무엇입니까?

Question

나는 페이스 북의를 사용하여 응용 프로그램을 반응 짓고 있어요 :

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

을 SASS w 함께 : 나는 헤더에 드롭 다운 메뉴를 추가 할 필요가 어디 지금 시점에있어 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

합니다. 오른쪽 상단의 StackOverflow에있는 헤더 아이콘과 유사하게 클릭시 열고 닫을 수 있습니다.

나는 이것이 바보 같은 질문처럼 들리지만이 일을 올바르게하는 방법은 무엇인지 압니까? 이런 식으로 부트 스트랩과 같은 UI 프레임 워크를 추가해야합니까? 나는 모든 부트 스트랩 테마 등을 필요로하지 않는다.

나는 솔로 개발자이고 내 애플 리케이션에 탄탄한 토대를 구축하는 데 도움이 될 수있다.

감사

Answer 1

이 같은 react-select를 사용할 수 있습니다

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

이 라이브러리 : 프로젝트가 자신의 INFA 여전히 같은

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

Answer 2

보인다 좋았어. 그리고 당신은 당신의 프로젝트에 도서관을 통합하고자합니다. 그래서 지금 당장 라이브러리를 선택하라고 권합니다.

React를 사용하면 많은 노력없이 나만의 메뉴를 만들 수 있습니다. 하지만 나머지 앱에는 다른 구성 요소가 필요할 것입니다. 메뉴 (및 기타 구성 요소)의 품질은 자신이 아닌 많은 사람들이 사용하는 라이브러리를 선택하면 더 커질 가능성이 큽니다. UX 디자인, HTML 표준, API 재사용 가능성, 결함 수 등

앱이 작아서 전체 UI 프레임 워크가 필요하지 않다고 생각한다면 다음을 검색 할 수 있습니다. 메뉴에 대한 격리 된 구성 요소입니다. https://devarchy.com/react/topic/navigation

그러나 대부분의 경우 나는 대신에 전체 UI 프레임 워크를 선택할 것 : https://devarchy.com/react/topic/ui-framework

그리고 여기를 몇 가지 데모 여기에 (각 프로젝트의 GitHub의 별의 수를 포함하여) 탐색 구성 요소의 목록입니다 일부 인기 UI 프레임 워크의 메뉴/탐색/응용 프로그램 바 :

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

Answer 3

예는 반작용으로 쉽게 할 수 있습니다

이

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>