码迷,mamicode.com
首页 > 其他好文 > 详细

阮一峰react-demo

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

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

1

<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>


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

<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>

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

      ReactDOM.render(
        <div>
        {
          names.map((name, index)=> {
      return <div key={index}>Hello, {name}!</div>
  }) } </div>, document.getElementById(‘example‘) );
3)

<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>


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

<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>


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)

<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>

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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!