阮一峰react-demo

Posted 2020-12-21 dongxiaolei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阮一峰react-demo相关的知识，希望对你有一定的参考价值。

1）


 ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById(‘example‘)
      );
2）

let names = [‘Alice‘, ‘Emily‘, ‘Kate‘];

      ReactDOM.render(
        <div>
        {
          names.map((name, index)=> {

　　　　　　return <div key={index}>Hello, {name}!</div>

  }) } </div>, document.getElementById(‘example‘) );

3)


let arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById(‘example‘)
      );

4)


class HelloMessage extends React.Component {
        render() {
          return <h1>Hello {this.props.name}</h1>;
        }
      }
      ReactDOM.render(
        <HelloMessage name="John" />,
        document.getElementById(‘example‘)
      );

注：React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

参考：https://blog.csdn.net/uuihoo/article/details/79710318

5）

class NotesList extends React.Component {
        render() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      }

      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById(‘example‘)
      );

 6）//  使用PropTypes进行类型检查，声明props的类型
参考：https://www.jianshu.com/p/2896acb5746b
 <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
  var data = 123;

      class MyTitle extends React.Component {
        static propTypes = {
          title: PropTypes.string.isRequired,
        }
        render() {
          return <h1> {this.props.title} </h1>;
        }
      }
                                                                                                                                                                                                                                                                                                                                                                                                                           
      ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById(‘example‘)
      );

使用PropTypes进行类型检查

以上是关于阮一峰react-demo的主要内容，如果未能解决你的问题，请参考以下文章

react入门实例教程

js中的console对象（读书笔记-阮一峰的js标准参考教程）

阮一峰的介绍

flex实例（阮一峰）

关于阮一峰老师es6(第三版)中管道机制代码的理解浅析

转：阮一峰Flex 布局教程：实例篇