buppt的博客

buppt的博客

从零一起学react(3)---组件的创建

前言

组件的创建既可以用createClass(ES5语法)也可以用class(ES6语法),既然ES6比较新,本文及以后就一直用ES6语法了。两种语法如下。

//使用ES5语法
var MyComponentES5 = React.createClass({
    render: function(){
        return (<h1>Hello world</h1>);
    }
});
//使用ES6语法
class MyComponentES6 extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

组件

1.组件的创建

其实前言中已经创建了一个组件了,这里先贴上完整代码。

<body>
<div id="test"></div>
<script src="./react/react.development.js"></script>
<script src="./react/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
class Hello extends React.Component {
  render() {
    return (<h1>Hello world</h1>);
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('test')
);
</script>
</body>

这样,我们就创建了一个名叫Hello的组件。(注意:组件的名称首字母要大写!这是规定。)
在组件中,我们创建了一个render方法,这个方法返回了一个JSX表达式。
在ReactDOM.render()中使用组件的方法就是<组件名 />。

2.组件中使用变量属性

const blog={
    src: 'https://buppt.github.io',
    name: 'buppt'
}
class Myblog extends React.Component{
    render(){
        return (
            <a href={blog.src}>这是我的博客{blog.name}</a>
        );
    }
}
ReactDOM.render(
  <Myblog />,
  document.getElementById('test')
);

和之前的一样,即在JSX中使用JS需要用{大括号扩起来}。

3.render方法

render方法需要一个返回return,但在return之前也可以写一些其他的代码,如。

const test = Math.random() < 0.5;
class Hello extends React.Component{
  render(){
    let task;
    if(test){
      task = "I'm true";
    }else{
      task = "I'm false";
    }
    return (<h1>{task}</h1>);
  }
}
ReactDOM.render(
    <Hello />,
    document.getElementById('test')
);

这样浏览器将随机显示I’m true或I’m false。

4.在组件中使用this

先看一个例子.

class Hello extends React.Component{
  get name() {
        return 'buppt';
  }
  render() {
    return (<h1>My name is {this.name}.</h1>);
  }
}
ReactDOM.render(
    <Hello />,
    document.getElementById('test')
);

this即该组件。

5.组件中事件监听

class Hello extends React.Component{
  name() {
        alert('My name is buppt');
  }
  render() {
    return <button onClick={this.name}>点我!</button>;
  }
}
ReactDOM.render(
    <Hello />,
    document.getElementById('test')
);

这里注意,button中的onClick事件要大写第一个C。

6.组件中使用另一个组件

和第一点中说的一样,使用组件只需要使用<组件名 />即可。例如:

class Hello extends React.Component {
  render() {
    return (<h1>Hello</h1>);
  }
}
class World extends React.Component {
  render() {
    return (
    <div>
        <Hello />
        <h1> World</h1>
    </div>);
  }
}
ReactDOM.render(
  <World />,
  document.getElementById('test')
);

7.无状态组件

如果一个组件中只有一个render()属性,我们可以把这个组件写成js function的形式,如。

class Hello extends React.Component{
  render() {
    return (<h1>Hello</h1>);
  }
}
//可以写成下面的形式
const Hello = () =>{
    return <h1>Hello</h1>;
}

这种形式的组件可以传递props属性,如下:

const Hello = (props) =>{
    return <h1>{props.message}</h1>;
}
ReactDOM.render(
  <Hello message="Hello World" />,
  document.getElementById('test')
);

就到这里把~下一篇讲组件的state和props。

阅读更多
版权声明:转载请注明博客地址谢谢。 https://blog.csdn.net/buppt/article/details/78205548
文章标签: react 组件
个人分类: react
所属专栏: 从零一起学react
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

从零一起学react(3)---组件的创建

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭