コンポーネント1

[sumakokima2]

親コンポーネント

import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

ReactDOM.render(<App />, document.getElementById("root"));

子コンポーネント

import React from 'react';
import ReactDOM from 'react-dom';

// connect するコンポーネントが必要としている Dispatch を受け取る Props の型
通常はtypes.d.tsで設定するが、今回うまくできなかったのでここで設定

interface Data {
    id: string;
    name: string;
    show: boolean;
  }
// connect するコンポーネントが必要としている Dispatch を受け取る Props の型。
interface Props {
    pins: Data[];
  }
// そのコンポーネントが持っている状態
  interface State {
    pinsshow: boolean[];
    pinsboolean:boolean;
  }

// Reactコンポーネントクラス「App」を宣言
export default class App extends React.Component<Props, State> { 

//constructor内でpropsを受け取ってpropsとstateを初期化する処理を行う
  constructor(props) {                                  
    super(props);     //propsの受け取り
　//stateを使うときにconstructorが必須になる        
    this.state = {pinsboolean : true, pinsshow: []};      
  }
 render() {
    return (
      <div>
        <h1>Hello, {this.props.pinsboolean}!</h1> // 無理やりですが。。。
      </div>
    );
  }
}

React における State と Props の違い

• State と Props React コンポーネントがデータを受け取ったり、ハンドリングしたり、表示したりするための主要な方法として、State と Props があります。 この二つの概念の違いを知ることは、React を効率的に利用するために役立ちます。

• State: そのコンポーネントが持っている状態 State はコンポーネント自体によって保持され、コンポーネントからコンポーネントへは渡されない State の値は、this.setState()をコンポーネント内で呼び出すことによって更新される。

• Props: 親コンポーネントから渡されたプロパティ 変更はできない。 親コンポーネントから渡される デフォルト値の設定と検証が可能