欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React?組件傳?children?的各種案例方案詳解

 更新時間：2023年10月12日 09:40:32   作者：祖安狂人學編程  
自定義組件的時候往往需要傳?children,由于寫法比較多樣,我就總結了一下,要自定義的組件其中包含一個?title?和一個?children,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧

自定義組件的時候往往需要傳 children，由于寫法比較多樣，我就總結了一下。

要自定義的組件是這樣的：

在這里插入圖片描述

其中包含一個 title 和一個 children。

定義一個后面要用到的 Props:

/** 定義屬性對象
 * - title: 標題
 * - children: 子組件
 */
type Props = {
  title: string;
  children?: React.ReactNode;
};

1. 類組件

1.1 類組件，不使用解構

class ClassComponent1 extends Component<Props> {
  render(): ReactNode {
    return (
      <div style={{ backgroundColor: 'red' }}>
        <h2>{this.props.title}</h2>
        {this.props.children}
      </div>
    );
  }
}

1.2 類組件，使用解構

class ClassComponent2 extends Component<Props> {
  render(): ReactNode {
    // 解構賦值
    const { title, children } = this.props;
    return (
      <div style={{ backgroundColor: 'red' }}>
        <h2>{title}</h2>
        {children}
      </div>
    );
  }
}

2. 函數(shù)組件

2.1 函數(shù)組件，不使用解構

const FunctionComponent1: React.FC<Props> = (props) => {
  return (
    <div style={{ backgroundColor: 'orange' }}>
      <h2>{props.title}</h2>
      {props.children}
    </div>
  );
};

2.2 函數(shù)組件，外部解構

const FunctionComponent2: React.FC<Props> = ({ title, children }) => {
  return (
    <div style={{ backgroundColor: 'orange' }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
};

2.3 函數(shù)組件，內部解構

const FunctionComponent3: React.FC<Props> = (props) => {
  // 解構賦值
  const { title, children } = props;
  return (
    <div style={{ backgroundColor: 'orange' }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
};

3. 普通函數(shù)

3.1 普通函數(shù)，內部解構

function NormalFunction1(props: Props) {
  // 解構賦值
  const { title, children } = props;
  return (
    <div style={{ backgroundColor: 'yellow' }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

3.2 普通函數(shù)，外部解構

function NormalFunction2({ title, children }: Props) {
  return (
    <div style={{ backgroundColor: 'yellow' }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

3.3 普通函數(shù)，外部解構，不使用自定義Type

function NormalFunction3({
  title,
  children,
}: {
  title: string;
  children?: React.ReactNode;
}) {
  return (
    <div style={{ backgroundColor: 'yellow' }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

3.4 普通函數(shù)，不使用解構，不使用自定義Type

function NormalFunction4(props: { title: string; children?: React.ReactNode }) {
  return (
    <div style={{ backgroundColor: 'yellow' }}>
      <h2>{props.title}</h2>
      {props.children}
    </div>
  );
}

調用及展示

export default class ChildrenPage extends Component {
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <h1>組件傳children</h1>
        <ClassComponent1 title="類組件，不使用解構">
          <p>這里是children</p>
        </ClassComponent1>
        <ClassComponent2 title="類組件，使用解構">
          <p>這里是children</p>
        </ClassComponent2>
        <FunctionComponent1 title="函數(shù)組件，不使用解構">
          <p>這是里children</p>
        </FunctionComponent1>
        <FunctionComponent2 title="函數(shù)組件，外部解構">
          <p>這是里children</p>
        </FunctionComponent2>
        <FunctionComponent3 title="函數(shù)組件，內部解構">
          <p>這是里children</p>
        </FunctionComponent3>
        <NormalFunction1 title="普通函數(shù)，內部解構">
          <p>這里是children</p>
        </NormalFunction1>
        <NormalFunction2 title="普通函數(shù)，外部解構">
          <p>這里是children</p>
        </NormalFunction2>
        <NormalFunction3 title="普通函數(shù)，外部解構，不使用自定義Type">
          <p>這里是children</p>
        </NormalFunction3>
        <NormalFunction4 title="普通函數(shù)，不使用解構，不使用自定義Type">
          <p>這里是children</p>
        </NormalFunction4>
      </div>
    );
  }
}

到此這篇關于React 組件傳 children 的各種方案的文章就介紹到這了,更多相關React 組件傳 children內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • 取消正在運行的Promise技巧詳解

    取消正在運行的Promise技巧詳解

    這篇文章主要為大家介紹了取消正在運行的Promise技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-06-06
  • React使用Echarts/Ant-design-charts的案例代碼

    React使用Echarts/Ant-design-charts的案例代碼

    這篇文章主要介紹了React使用Echarts/Ant-design-charts的實例代碼，本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-11-11
  • React之如何在Suspense中優(yōu)雅地請求數(shù)據(jù)

    React之如何在Suspense中優(yōu)雅地請求數(shù)據(jù)

    Suspense 是 React 中的一個組件，直譯過來有懸掛的意思，能夠將其包裹的異步組件掛起，直到組件加載完成后再渲染，本文詳細介紹了如何在Suspense中請求數(shù)據(jù)，感興趣的小伙伴可以參考閱讀本文
    2023-04-04
  • react?diff?算法實現(xiàn)思路及原理解析

    react?diff?算法實現(xiàn)思路及原理解析

    這篇文章主要介紹了react?diff?算法實現(xiàn)思路及原理解析,本節(jié)我們正式進入基本面試必考的核心地帶?--?diff?算法，了解如何優(yōu)化和復用?dom?操作的，還有我們常見的?key?的作用,需要的朋友可以參考下
    2022-05-05
  • React中進行條件渲染的實現(xiàn)方法

    React中進行條件渲染的實現(xiàn)方法

    React是一種流行的JavaScript庫,它被廣泛應用于構建Web應用程序,在React中,條件渲染是一個非常重要的概念,它允許我們根據(jù)不同的條件來呈現(xiàn)不同的內容,在本文中,我們將探討React如何進行條件渲染,需要的朋友可以參考下
    2023-11-11
  • React Native項目中使用Lottie動畫的方法

    React Native項目中使用Lottie動畫的方法

    這篇文章主要介紹了React Native 實現(xiàn)Lottie動畫的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-10-10
  • React性能優(yōu)化的實現(xiàn)方法詳解

    React性能優(yōu)化的實現(xiàn)方法詳解

    react憑借virtual DOM和diff算法擁有高效的性能，除此之外也有很多其他的方法和技巧可以進一步提升react性能，在本文中我將列舉出可有效提升react性能的幾種方法，幫助我們改進react代碼，提升性能
    2023-01-01
  • 解決React報錯Expected an assignment or function call and instead saw an expression

    解決React報錯Expected an assignment or funct

    這篇文章主要為大家介紹了React報錯Expected an assignment or function call and instead saw an expression解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • 使用Axios在React中請求數(shù)據(jù)的方法詳解

    使用Axios在React中請求數(shù)據(jù)的方法詳解

    這篇文章主要給大家介紹了初學React,如何規(guī)范的在react中請求數(shù)據(jù),主要介紹了使用axios進行簡單的數(shù)據(jù)獲取,加入狀態(tài)變量,優(yōu)化交互體驗,自定義hook進行數(shù)據(jù)獲取和使用useReducer改造請求,本文主要適合于剛接觸React的初學者以及不知道如何規(guī)范的在React中獲取數(shù)據(jù)的人
    2023-09-09
  • React?setState是異步還是同步原理解析

    React?setState是異步還是同步原理解析

    這篇文章主要為大家介紹了React?setState是異步還是同步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-11-11

最新評論