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

最新推荐文章于 2022-01-06 18:04:40 发布

buppt

最新推荐文章于 2022-01-06 18:04:40 发布

阅读量1k

点赞数

分类专栏： react 从零一起学react 文章标签： react 组件

本文链接：https://blog.csdn.net/buppt/article/details/78205548

版权

react 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

从零一起学react

8 篇文章 1 订阅

订阅专栏

前言

组件的创建既可以用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。