Next.js+React进门记005【组件中传递的数据类型】

本文链接：https://blog.csdn.net/kaikyou3000/article/details/139754433

组件中传递的数据类型

在about.js页面的Headline组件标签中，分别追加设置数字、数组、对象、布尔值、组件等数据

在Headline.js组件中增加打印代码

查看浏览器控制台打印效果

将Headline.js组件的一部分内容通过props参数传递过来

在about.js页面的Headline标签中设置code属性

回到Headline.js组件，从props参数中接收about.js页面传来的code属性值

查看about.js页面，可发现数据成功显示

同样，在index.js页面中，也在Headline标签中设置code属性

打开index.js页面，可发现数据成功显示

添加点击事件

在Headline.js组件中添加按钮点击事件

在index.js页面的Headline标签中设置onClick属性，属性值为无名函数

在index.js页面点击按钮，成功完成点击事件

在各页面中的Headline标签中，添加关闭标签，无需设置属性自动变为子组件的传递值

在Headline.js组件中调用父组件传来的属性数据

打开index.js页面，可发现传递给Headline.jis子组件的数据显示正常

打开about.js页面，可发现传递给Headline.jis子组件的数据显示正常

各个页面的main标签内容也可以进行组件化

在components文件夹下新建Main.js组件

Main.js组件代码

import styles from '../styles/Home.module.css'
import { Links } from '../components/Links'
import { Headline } from '../components/Headline'

export function Main(props) {
  return (
      <main className={styles.main}>
        <Headline page={props.page}>
         <code className={styles.code}>pages/{props.page}.js</code>
        </Headline>
       <Links />
      </main>
  )
}

修改index.js页面，调用Main.jis组件

index.js页面代码

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

       <Main page="index"/>

     <Footer />
    </div>
  )
}

浏览器查看index.js页面，显示正常

修改about.js页面，调用Main.jis组件

about.js页面代码

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>About page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

       <Main page="about"/>

     <Footer />
    </div>
  )
}

浏览器查看about.js页面，显示正常