Reactでpropsを使用する方法と制限する方法

 <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- react core ライブラリをインポート -->
  <script src="../js/react.development.js"></script>
  <!-- react-dom を導入して、DOM を操作するための react をサポートする -->
  <script src="../js/react-dom.development.js"></script>
  <!-- jsx を js に変換するには babel を導入します -->
  <script src="../js/babel.min.js"></script>
  <スクリプトタイプ='text/babel'>
  // コンポーネントを作成する class Person extends React.Component{
    与える（） {
      console.log(これを);
      const{名前、年齢、性別} = this.props
      戻る（
        <ul>
          <li>名前: {name}</li>
          <li>性別: {sex}</li>
          <li>年齢: {age+1}</li>
        </ul>
      ）
    }
  }
  // コンポーネントをページにレンダリングします ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<人名={p.name} 年齢={p.age} 性別={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </スクリプト>

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- react core ライブラリをインポート -->
  <script src="../js/react.development.js"></script>
  <!-- react-dom を導入して、DOM を操作するための react をサポートする -->
  <script src="../js/react-dom.development.js"></script>
  <!-- jsx を js に変換するには babel を導入します -->
  <script src="../js/babel.min.js"></script>
  <!-- コンポーネント タグの属性を制限するために使用される prop-types を導入します。導入後、世界にはもう 1 つのオブジェクト PropTypes があります -->
  <script src="../js/prop-types.js"></script>

  <スクリプトタイプ='text/babel'>
  // コンポーネントを作成する class Person extends React.Component{
    与える（） {
      console.log(これを);
      const{名前、年齢、性別} = this.props
      戻る（
        <ul>
          <li>名前: {name}</li>
          <li>性別: {sex}</li>
          <li>年齢: {age+1}</li>
        </ul>
      ）
    }
  }
  // 制限ルール Person.propTypes = {
    // 名前の内容を文字列に制限する isRequired は、内容が必須であり省略できないことを意味します name:PropTypes.string.isRequired,
    // 性別を文字列に制限する sex: PropTypes.string,
    // 年齢を数値に制限する age: PropTypes.number,
    // 発言を関数speak: PropTypes.funcに制限する
  }
  Person.defaultProps = {
    sex:'male', // 性別のデフォルト値は男性 age:18,
    話す: 関数() {
        [1]を返す;
    }
  }
  // コンポーネントをページにレンダリングします ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<人名={p.name} 年齢={p.age} 性別={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </スクリプト>

Vue.component('my-component', {
  小道具: {
    // 基本的な型チェック (`null` と `undefined` はすべての型検証に合格します)
    propA: 数値、
    // 複数の可能な型 propB: [String, Number],
    // 必須の文字列 propC: {
      タイプ: 文字列、
      必須: true
    },
    // デフォルト値を持つ数値プロパティ: {
      タイプ: 数値、
      デフォルト: 100
    },
    // デフォルト値を持つオブジェクト propE: {
      タイプ: オブジェクト、
      // オブジェクトまたは配列のデフォルト値はファクトリー関数から取得する必要があります default: function () {
        戻り値: 'hello' }
      }
    },
    // カスタム検証関数 propF: {
      バリデータ: 関数 (値) {
        // この値は、次の文字列のいずれかと一致する必要があります。 return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

弦
番号
ブール
配列
物体
日付
関数
シンボル

関数 Person (firstName, lastName) {
  this.firstName = ファーストネーム
  this.lastName = 姓
}

Vue.component('ブログ投稿', {
  小道具: {
    著者: 人物
  }
})