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