React入门0x005: React Component和props

0x000 概述

这一章讲组件,组件才是React的核心,也是React构建的项目中最小的单元。

0x001 组件

上面的章节有一个类似下面的栗子:

const App = () => {
    return <p>hello</p>
}
ReactDom.render(
    App(),
    document.getElementById('app')
)

查看浏览器

React入门0x005: React Component和props

我们可以给他参数

const App = (name) => {
    return <p>hello {name}</p>
}
ReactDom.render(
    App("world"),
    document.getElementById('app')
)

查看浏览器

React入门0x005: React Component和props

由此,我们可以自定义一些特别的组件了,比如:

const Article = (title, content) => {
    return <div>
        <h1>{title}</h1>
        <p>{content}</p>
    </div>
}
ReactDom.render(
    Article("送方外上人","孤云将野鹤,岂向人间住。莫买沃洲山,时人已知处。"),
    document.getElementById('app')
)

查看浏览器

React入门0x005: React Component和props

0x002 组件的函数写法和参数传递

组件也可以使用jsx 来写

const App = () => {
    return <p>hello</p>
}
ReactDom.render(
    <App></App>,
    document.getElementById('app')
)

babel转码试试:babel --plugins transform-react-jsx index.js:

var App = function App() {
    return _react2.default.createElement(
        'p',
        null,
        'hello'
    );
};
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));

可以看到依旧被转成了createElement函数,由React.createElement文档说明可知,该函数的第一个参数可以是类似divp之类的html元素,也可以是React Component,而React Component可以是一个类或者一个函数。该栗子中就是函数

那如果我们要实现传参呢,我们可以想想html如何传参,比如img

<img src="XXX.png">

那么写法和html及其类似的 jsx 呢?可想而知:

ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

我们使用babel转码看看:babel --plugins transform-react-jsx index.js:

_reactDom2.default.render(_react2.default.createElement(App, { name: 'world' }), document.getElementById('app'));

可以看到,被转化成了键值对作为React.createElement的第二个参数,那我们应该如何访问这个参数呢?

const App = (props) => {
    console.log(props)
    return <p>hello {props.name}</p>
}
ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

查看浏览器:

React入门0x005: React Component和props

React入门0x005: React Component和props

0x003 组件的类写法和传参

在之前的文章,也已经写过这么一个类似的栗子:

class App extends React.Component{
    render(){
        return <p>hello</p>
    }
}
ReactDom.render(
    <App></App>,
    document.getElementById('app')
)

查看浏览器:

React入门0x005: React Component和props

那如何传参呢?

class App extends React.Component {
    render() {
        console.log(this)
        return <p>hello</p>
    }
}

ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

查看浏览器:

React入门0x005: React Component和props

我们可以看到,参数被放在了props中,所以,我们可以像这样访问:

class App extends React.Component {
    render() {
        console.log(this)
        return <p>hello {this.props.name}</p>
    }
}

ReactDom.render(
    <App name="world"></App>,
    document.getElementById('app')
)

查看浏览器

React入门0x005: React Component和props

0x004 jsx也是js

因为jsx也是js,所以,上面的栗子我们也可以如此改造

class App extends React.Component {
    render() {
        console.log(this)
        return <p>hello {this.props.name}</p>
    }
}

ReactDom.render(
    <App name={Date()}></App>,
    document.getElementById('app')
)

使用babel转码看看:babel --plugins transform-react-jsx index.js:

_reactDom2.default.render(_react2.default.createElement(App, { name: Date() }), document.getElementById('app'));

查看浏览器:

React入门0x005: React Component和props

0x005 总结

  • 在项目中,我们一般使用类的形式组织整个项目,但是在某些情况下,使用函数也是一种不错的选择。
  • jsx是使用类html的语法来写js,所以很多html的思想可以套用到jsx,但是一定要记得,这是js,而不是html

0x006 资源

相关推荐