1⃣基本用法

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props的基本用法</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>
    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this)
          //props只读
          return (
            <ul>
              <li>{this.props.name}</li>
              <li>{this.props.sex}</li>
              <li>{this.props.age}</li>
            </ul>
          );
        }
      }

      ReactDOM.render(<Person name="仮面勇者" sex='未知' age ='999'/>, document.getElementById('app'));
    </script>
  </body>
</html>

页面：

Untitled

最简单的props用法完成，从组件标签里面往组件内部传送数据。

组件标签里的数据问题

真实的person肯定不只这3个属性而且整个属性基本是从后台传过来的json 我们必须换一种传送数据的方式

const p = {name:'仮面勇者',sex:'未知',age:999 }
      ReactDOM.render(<Person name={ p.name} sex={p.sex} age ={p.age}/>, document.getElementById('app'));