#yyds干货盘点 react笔记之学习之props父子传值

简介: #yyds干货盘点 react笔记之学习之props父子传值

父子组件传值 日期组件data.js

import React from 'react';
import MyDate from "./MyDate/MyDate";
import './LogItem.css'
const LogItem = (props) => {
    // 在函数组件中,属性就相当于是函数的参数,可以通过参数来访问
    // 可以在函数组件的形参中定义一个props,props指向的是一个对象
    // 它包含了父组件中传递的所有参数
    // console.log(props);
    return (
        <div className="item">
            <MyDate/>
            {/* 日志内容的容器 */}
            <div className="content">
                {/*
                  如果将组件中的数据全部写死,将会导致组件无法动态设置,不具有使用价值
                    我们希望组件数据可以由外部设置,在组件间,父组件可以通过props(属性)向子组件传递数据
                */}
                <h2 className="desc">{props.desc}</h2>
                <div className="time">{props.time}分钟</div>
            </div>
        </div>
    );
};
export default LogItem;

父组件

/* 日志的容器 */
import LogItem from "./LogItem/LogItem";
import './Logs.css';
const Logs = () => {
  return <div className="logs">
    {/*在父组件中可以直接在子组件中设置属性*/}
    {/*<LogItem test="456" hello="abc" fn={()=>{}} />*/}
    <LogItem date={new Date()} desc={"学习前端"} time={"50"} />
    <LogItem date={new Date()} desc={"哈哈"} time={"30"} />
  </div>
};
export default Logs;

image.png

相关文章
|
9天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
1月前
|
前端开发
React中Props的详细使用和props的校验
React中Props的详细使用和props的校验
|
1月前
|
前端开发 数据库
第七章 react组件实例中三大属性之props
第七章 react组件实例中三大属性之props
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
7天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
1月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
64 2
|
1月前
|
前端开发
React中render Props模式
React中render Props模式
React中render Props模式
|
2月前
|
存储 前端开发
react中 state和props的区别
react中 state和props的区别
15 0
|
2月前
|
前端开发 JavaScript API
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
27 0
|
2月前
|
前端开发
react怎么实现父子组件传值
react怎么实现父子组件传值