Как создать многоразовый компонент или частичный в response.js?

Question

Впервые работая с React.js, я хотел сделать что-то довольно простое.

Я создал приложение app.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

Идеальный способ сделать это было бы, сделав лица без функционального компонента. Поскольку вы не вносите изменения, основанные на состоянии для компонента навигации, вы можете сделать его легким функциональным компонентом без гражданства, который просто отображает требуемое представление для вас.

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 файл:

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 здесь.

Answer 3

Вы можете создать еще один компонент, как NavLinks и так как он не имеет никакого состояния вы можете создать его в качестве компонента без гражданства и импорта в App как

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

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;