阮一峰react-demo

时间：2020-11-06 01:14:38 阅读：19 评论：0 收藏：0 [点我收藏+]

标签：emoji blog 有用 mac UNC element evel col dom

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

标签：emoji blog 有用 mac UNC element evel col dom

原文地址：https://www.cnblogs.com/dongxiaolei/p/13928880.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行