前言
我是歌谣 我有个兄弟 巅峰的时候排名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;
