做烧烤的网站,网站的关键词怎么设置,扬州工程建设招标网,51网站空间相册组合与继承
若Container内部有内容#xff0c;React会在props内部增加children属性若Container内部有非元素内容#xff0c;children#xff1a;非元素内容若Container内部有单个元素内容#xff0c;children#xff1a;React元素对象若Container内部有多个元素内容…组合与继承
若Container内部有内容React会在props内部增加children属性若Container内部有非元素内容children非元素内容若Container内部有单个元素内容childrenReact元素对象若Container内部有多个元素内容children[]
打印props情况2非元素内容
Container666/Container情况3单个元素内容
Containerh1666/h1/Container情况4多个元素内容
Containerh1666/h1p888/p
/Containerprops
JSX还可以通过props传递视图元素JSX本质上都会转成React元素对象 Object视图通过props传递的机制类似Vue的插槽但React没有slot的概念定义React本身就允许通过props传递任何类型的数据到子组件
React样式
CSS Moduleindex.module.css
import styles from ./index4.module.css
// 用变量接收
class Container extends React.Component {render() {console.log(this.props)return (div className{styles.container}div className{styles.header}{this.props.header}/divdiv className{styles.main}div className{styles.left}{this.props.left}/divdiv className{styles.right}{this.props.right}/div/div/div)}
}
class Header extends React.Component {render() {return divHeader/div}
}
class Left extends React.Component {render() {return divLeft/div}
}
class Right extends React.Component {render() {return divRight/div}
}
class App extends React.Component {render() {return (divContainerheader{Header /}left{Left /}right{Right /}/Container/div)}
}
ReactDOM.render(App /,document.getElementById(app)
).container {background: #ccc;text-align: center;
}
.header {height: 50px;line-height: 50px;border: 2px dashed #000;
}
.main {display: flex;
}
.left {width: 20%;background: pink;
}
.right {background: skyblue;flex: 1;
}多层组合
import styles from ./index5.module.css// 多层组合
// Modal是公共的部分定制的内容作为children传入
function Modal(props) {return (div className{styles.wrap}header className{styles.title}{props.title}/headerdiv classNamemain{props.children}/div/div)
}
// 注意函数式 props作为参数传入 不用this来访问props
function Alert(props) {return (divModal title{props.title}p{props.mainText}/p/Modal/div)
}
function LoginModal(props) {return (divModal title{props.title}formp用户名input typetext //pp密码input typepassword //ppbutton登录/button/p/form/Modal/div)
}
ReactDOM.render(divAlertmainText显示内容title显示modal/LoginModal title登录modal/LoginModal/div,document.getElementById(app))React目前还没有发现有需要组件继承的需求 因为通过children或者传递视图React元素的方式完全可以解决组件组合的问题太 props可以传递任何类型的数据所以组合的方式可以替代继承方案。 逻辑部分需要继承或共用该部分需要自己去编写逻辑抽离的模块、函数、类单独进行模块导入使用
