关于React Props

首先

我已经开始学习React。当我开始使用React并且对它产生了更多的兴趣后，我决定专注于学习React和TypeScript来掌握前端开发。因此，这次我将总结一下关于props的一些笔记。

道具

• 親コンポーネントから子コンポーネントにデータを渡してやる為の方法。

• 具体的には親で渡したいデータを属性値として定義して子に渡してやります。

子は引数として受けとります。そしてデータを使う際には {} ないで記述していきます。

//親
import Childern from './Childerm';

const App = () => {
  return (
     <>
       <Childern testValue='this is data of children' />
     </>
  );
}

如果以ipayz仅作为支付选项

const Childern = (props) => {
   const {testValue} = props;
   return (
      <>
         <p>{testValue}</p>
      </>
   );
}

//ブラウザー上で
//thi is data of childern

孩子们

把包含子组件的所有父元素作为 props 传递的方法。

首先从子组件开始

import React from "react";
import Header from "../Header/Header";

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      {children}
    </>
  );
};

export default Layout;

家长组件

import React from "react";
//componets
import Layout from "../components/layouts/Layout";

const TopPage = () => {
  return (
    <>
      <Layout>
        <div>top page</div>
      </Layout>
    </>
  );
};

export default Top;

我传递了包含在内的所有元素，所以你可以传递组件、函数或者用HTML编写的元素。它似乎可以在创建共同的布局时发挥作用。不仅限于布局，它似乎也可以在创建列表页面时很有用。

结束

如果还有更实用的写作方法，我会上传的。