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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点 react笔记之学习之props父子传值相关的知识,希望对你有一定的参考价值。

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

父子组件传值 日期组件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;

#yyds干货盘点

以上是关于#yyds干货盘点 react笔记之学习之props父子传值的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干货盘点# react笔记之学习之完成删除功能

#yyds干货盘点# react笔记之学习之显示日期

#yyds干货盘点# react笔记之学习之空列表提示

#yyds干货盘点# react笔记之学习之完成添加功能

#yyds干货盘点# react笔记之学习之双向绑定

#yyds干货盘点# react笔记之学习之state注意事项