创建一个组件
1.箭头函数
const AwesomeHeader =() => {
return (react1
)
}
ReactDOM.render(
,
document.querySelector('#app')
)
复制代码class AwesomeContent extends.component {
render () {
return (react2
)
}
}
ReactDOM.render(
,
document.querySelector('#app')
)
复制代码1.React的组件必须是大写字母开头
2.组件可嵌套，在react的 jsx (javascript + xml)里，如果是 空元素 （没有子元素）,推荐使用自闭合
class App extends Component {
render() {
return (
4.在react 16之后新增了一个Fragment组件：用于替换最外层的根元素（如果你不想多一层根元素的情况下）
复制代码JSX
在jsx里要写js代码的时候，需要用 {}
**注意：**JSX里面只能写表达式
class AwesomeContent extends React.Component {
render() {
return (
'#f66' }}>
{ 1+1 }
{ 1+1 === 2 ? '真牛！' : '真傻' }
)
}
}
ReactDOM.render(
class AwesomeContent extends React.Component {
render() {
return (
'#f66' }}>
{ 1+1 }
{ 1+1 === 3 ? '真牛！' : '真傻' }
)
}
}
ReactDOM.render(
子组件向父组件传参
props.children
1.以箭头函数创建的组件
想要获取props,需要在函数的参数里通过一个形参去获取
//子组件
const AwesomeHeader = (props) => {
console.log(props)
const headerText = 'awesome react'
return (
{headerText} - {props.children}
)
}
//父组件
class App extends Component {
render() {
return (
Hello
)
}
}
复制代码2.以从React.component里继承的方式创建组件
react里props.children是一种特殊的props，就表示一个组件的子元素
由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取
//子组件
class AwesomeContent extends React.Component {
render() {
console.log(this.props)
return (
{this.props.children}
react2
)
}
}
//父组件
class App extends Component {
render() {
return (
awesome content 1
)
}
}
复制代码props
1.以箭头函数创建的组件
想要获取props,需要在函数的参数里通过一个形参去获取
//子组件（ AwesomeHeader是一个函数式的组件，所以可以在内部通过props.属性名来访问）
const AwesomeHeader = (props) => {
console.log(props)
// 调用一个父组件传递过来的方法
props.logFn()
return (
// 调用一个父组件传过来的值
{props.headerText}
)
}
//父组件（所以想要传递参数，直接在子组件调用的地方写属性, 属性除了字符串以外，都要用{}）
export default class App extends Component {
render() {
return (
"Niubility React"
logFn={() => {
console.log('从app传过来的方法')
}}
/>
)
}
}
复制代码2.以从React.component里继承的方式创建组件
由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取
//子组件（ AwesomeContent是一个继承式的组件，所以可以通过this.props.属性名来访问）
export default class AwesomeContent extends Component {
render() {
console.log(this.props)
// 调用一个父组件传递过来的方法
this.props.logFn()
return (
{this.props.headerText}
react2
)
}
}
//父组件（所以想要传递参数，直接在子组件调用的地方写属性, 属性除了字符串以外，都要用{}）
export default class App extends Component {
render() {
return (
"Niubility React"
logFn={() => {
console.log('从app传过来的方法')
}}
/>
)
}
}
复制代码补充：
1.
import AwesomeHeader from './AwesomeHeader'
import AwesomeContent from './AwesomeContent'
export {
AwesomeHeader,
AwesomeContent
}
复制代码export { default as AwesomeHeader } from './AwesomeHeader'
export { default as AwesomeContent } from './AwesomeContent'
复制代码以上两种写法，效果一样
2.
快捷键：
rfc:以函数的方式创建组件
rcc:以class类的方式创建组件