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> ) } }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
