标签：NavBar 插槽 Component react 案例 nav props import children

 

 

import React, { Component } from 'react' // import NavBar from './NavBar' import NavBar2 from './NavBar-2' export default class App extends Component {     render() {          return (             <div>                {/* <NavBar>                      <span>AAA</span>                     <strong>bbb</strong>                        <a href="https://www.baidu.com/">ccc</a>                </NavBar>  */}
              <NavBar2 leftSlot={ <span>AAA</span> }                        centerSlot={ <strong>bbb</strong> }                        rightSlot={ <a href="https://www.baidu.com/">ccc</a> }                 />              </div>         )     } } ---------------- body{     padding: 0;     margin: 0; } .nav-bar{     display: flex; }
.nav-item {     height: 44px;     line-height: 44px;     text-align: center; } .nav-left, .nav-right {      width: 70px;     skyblue; }
.nav-center{      flex: 1;       orangered; } ---------1----------     import React, { Component } from 'react' import './style.css' export default class NavBar extends Component {     render() {         console.log(this.props.children);         return (             <div className="nav-bar">                 <div className="nav-item  nav-left">  {this.props.children[0]}   </div>                 <div className="nav-item  nav-center">  {this.props.children[1]} </div>                 <div className="nav-item  nav-right">  {this.props.children[2]} </div>             </div>         )     } }     -----------2 具名插槽-----------      import React, { Component } from 'react' import './style.css' export default class NavBar extends Component {     render() {         // console.log(this.props);          const {leftSlot,centerSlot,rightSlot} = this.props;         return (             <div className="nav-bar">                 <div className="nav-item  nav-left">  {leftSlot} </div>                 <div className="nav-item  nav-center"> {centerSlot}  </div>                 <div className="nav-item  nav-right"> {rightSlot}   </div>             </div>         )     } }

标签：NavBar,插槽,Component,react,案例,nav,props,import,children
来源： https://www.cnblogs.com/eric-share/p/15127863.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。