zoukankan      html  css  js  c++  java
  • 4 React 组件

    使用组件使得我们的应用更容易来管理

    React 组件:

    1:可以使用函数定义一个组件

    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    }
     
    const element = <HelloMessage />;
     
    ReactDOM.render(
        element,
        document.getElementById('example')
    );

    2: 也可以使用 ES6 class 来定义一个组件:

    class Welcome extends React.Component {
      render() {
        return <h1>Hello World!</h1>;
      }
    }

    const element = <HelloMessage /> 为用户自定义的组件。

    注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。
    除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。

    3: 组件的参数传递,使用 this.props 对象, name 属性通过 props.name 来获取。

    function HelloMessage(props) {
        return <h1>Hello {props.name}!</h1>;
    }
     
    const element = <HelloMessage name="Runoob"/>;
     
    ReactDOM.render(
        element,
        document.getElementById('example')
    );

    复合组件:

    可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离:

    function Name(props) {
        return <h1>网站名称:{props.name}</h1>;
    }
    function Url(props) {
        return <h1>网站地址:{props.url}</h1>;
    }
    function Nickname(props) {
        return <h1>网站小名:{props.nickname}</h1>;
    }
    function App() {
        return (
        <div>
            <Name name="菜鸟教程" />
            <Url url="http://www.runoob.com" />
            <Nickname nickname="Runoob" />
        </div>
        );
    }
     
    ReactDOM.render(
         <App />,
        document.getElementById('example')
    );
  • 相关阅读:
    简单背包问题
    拓扑排序
    SPFA--P3905 道路重建
    Floyd--P1119 灾后重建
    Kmp--P3375 【模板】KMP字符串匹配
    练习 后缀数组
    BZOJ1036: [ZJOI2008]树的统计Count(树链剖分)
    BZOJ1503: [NOI2004]郁闷的出纳员(Splay)
    BZOJ2733: [HNOI2012]永无乡(线段树合并)
    BZOJ4196: [Noi2015]软件包管理器(树链剖分)
  • 原文地址:https://www.cnblogs.com/liufei1983/p/14503571.html
Copyright © 2011-2022 走看看