react.js에서 재사용 가능한 구성 요소 또는 부분을 만드는 방법은 무엇입니까?

Question

React.js로 처음으로 작업하면서 꽤 간단한 작업을하고 싶었습니다.

나는 내 탐색 기능이있는 초기 페이지를로드하고 appps.js를 생성하여 하위 탐색 도구를 내뱉습니다.

탐색을 app.js 파일에 넣는 대신, 다른 구성 요소 또는 부분을 렌더링하여 렌더링하고 싶습니다. 아래

코드 :

import React, { Component } from 'react'; 
import NavLink from './components/NavLinks/NavLinks' 
import './App.css'; 
import { Link } from 'react-router'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <nav> 
      <li><NavLink to="/">Home</NavLink></li> 
      <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li> 
      <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink></li> 
     </nav> 

     <div className='container'> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

내가 좋아하는 것이 무엇 :이 같은

class App extends Component { 
    render() { 
    return (
     <div className="App"> 

     {-- Some component or partial here to render the nav --} 

     <div className='container'> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

쓰기가 :

먼저이 같은 응용 프로그램의 Navigation 부분을 포함하는 별도의 구성 요소를 만들 :

class Nav extends Component { 
    render() { 
    return (
     <div> 
      <nav> 
      <li><NavLink to="/">Home</NavLink></li> 
      <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li> 
      <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink></li> 
      </nav> 
     </div> 
    ); 
    } 
} 

export default Nav; 

는 그런 다음 App 성분이 네비게이션 파일을 가져 와서이 같은 render 내부에 직접 렌더링 : 상태 비 저장 기능 컴포넌트를함으로써 것이이 작업을 수행하는

import Nav from './nav'; // import here change the path according to your folder structure 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 

     <Nav/> 

     <div className='container'> 
      {this.props.children} 
     </div> 

     </div> 
    ); 
    } 
} 

export default App; 

Answer 2

이상적인 방법입니다. 탐색 구성 요소의 상태를 기반으로 변경하지 않으므로 필요한보기 만 렌더링하는 경량의 Stateless 기능 구성 요소로 만들 수 있습니다.

import navRenderer from 'path/to/navRenderer'; 

    class App extends Component { 
     render() { 
     return (
      <div className="App"> 
      <NavRenderer /> 
      <div className='container'> 
       {this.props.children} 
      </div> 
      </div> 
     ); 
     } 
    } 

export default App; 

현재 Stateless Functional Components에 대한 자세한 내용을보실 수 있습니다 :

const navRenderer =() => { 
    <nav> 
     <li><NavLink to="/">Home</NavLink></li> 
     <li><NavLink to="/contact" activeClassName="active">Contact</NavLink</li>   
     <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink</li> 
    </nav> 
    } 

export default navRenderer; 

지금 당신은 당신의 App.js 파일이 가져올 수 있습니다.

Answer 3

당신은 NavLinks 같은 다른 구성 요소를 만들 수 있으며 어떤 상태를 가지고 있지 않기 때문에 당신은

const NavLinks=() => { 
     <nav> 
      <li><NavLink to="/">Home</NavLink></li> 
      <li><NavLink to="/contact" activeClassName="active">Contact</NavLink</li>   
      <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink</li> 
     </nav> 
     } 

export default NavLinks; 

App.js 같은 App에서 비 저장 구성 요소 및 가져 오기로 만들 수 있습니다

import NavLinks form 'path/to/NavLinks'; 
class App extends Component { 
    render() { 
    return (
     <div className="App"> 

     <NavLinks/> 

     <div className='container'> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
} 

export default App;