Props

5541 ワード
react.js テキストリンク

📁 App.js

import React from "react";
import Container from "./Container";
import Counter from "./Counter";
// import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  const number = 6;

  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
  };

  return (
    <Container>
      <div>
        <MyHeader />
        <Counter {...counterProps} />
      </div>
    </Container>
  );
}

export default App;

📁 Counter.js

import React, { useState } from "react";
import OddEvenResult from "./OddEvenResult";

const Counter = ({ initialValue }) => {
  const [count, setCount] = useState(initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      <OddEvenResult count={count} />
    </div>
  );
};

Counter.defaultProps = {
  initialValue: 0,
};

export default Counter;

📁 OddEvenResult.js

const OddEvenResult = ({ count }) => {
  console.log(count);
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
};

export default OddEvenResult;

📁 Container.js

const Container = ({ children }) => {
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid gray" }}>
      {children}
    </div>
  );
};

export default Container;

✔運転画面



👉 親コンポーネントが子コンポーネントの値=Propsとして名前を付けて渡す方法
100 reactのコンポーネントはあなたが管理し、あなたが持っている状態が変更されるとrerenderになり、私の道具が変更されるとrerenderになります.
どちらもそうではありませんが、もし私の両親がrenderになったら、私もrenderになりました.
jsx要素はサブ要素として100 Concontainerコンポーネントに配置され、サブ要素としてConcontainerコンポーネントに伝達されるため、jsx要素はサブ要素に伝達され、値のようにサブ要素を利用してdivを外に置き、divを包んで使用できると結論した
State
2つの時間の区間内に何週間あるかを計算します.