美文网首页react学习教程
[React] 组件 & Props(3)

[React] 组件 & Props(3)

作者: 水流云间 | 来源:发表于2018-08-07 14:19 被阅读0次

    函数定义/类定义组件

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    
    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
    

    上面两个组件在React中是相同的。
    只是第一种是JS函数定义的组件,第二种是ES6 Class定义的组件。

    组件渲染

    React元素可以是DOM标签,也可以是用户自定义的组件。

    const element = <Welcome name="Sara" />;
    

    当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
    如上图会将{name: 'Sara'}作为props的值入Welcome组件内部。

    警告:
    组件名称必须以大写字母开头。
    例如,<div /> 表示一个DOM标签,但 <Welcome /> 表示一个组件,并且在使用该组件时你必须定义或引入它。

    组合组件

    组件可以在它的输出中引用其它组件,这就可以让我们用同一组件来抽象出任意层次的细节。
    多考虑组件的可复用性,视情况细化组件粒度。

    例如,我们可以创建一个 App 组件,用来多次渲染 Welcome 组件:

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    
    function App() {
      return (
        <div>
          <Welcome name="Sara" />
          <Welcome name="Cahal" />
          <Welcome name="Edite" />
        </div>
      );
    }
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );
    

    警告:
    组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

    Props的只读性

    React是非常灵活的,但它也有一个严格的规则:

    无论是使用 函数 或是 来声明一个组件,它决不能修改它自己的props!

    组件定义及引入步骤

    1. 首先创建一个Hello.js文件(在React中,约定成俗的习惯是组件命名首字母大写)
    import React from 'react';
    const hello = () => {
      return <p>Hello,React!</p>
    };
    export default hello;
    
    1. 在需要引入的地方import,如果我们最常见的App.js文件里。
    import Hello from './Hello/Hello';
    
    ReactDOM.render(<Hello/>, document.getElementById('root'));
    

    效果如图:


    相关文章

      网友评论

        本文标题:[React] 组件 & Props(3)

        本文链接:https://www.haomeiwen.com/subject/pdaovftx.html