第一步:构建react环境:
命令一键快速搭建
$ npx create-react-app my-app || npm init react-app my-app
1.创建两个.jsx文件,并在入口index.js中引入父文件,在父文件中引入子文件
创建的两个文件
在index.js中引入父文件
在父文件中引入子文件
2.两个文件的内容分别为:
*** 子文件中的内容如下 ***
*** 父文件中的内容如下 ***
子传父
这里是将父文件中的parentValue变量的值传递给子文件
在子文件中需要使用this.props.data来接受
注意:为什么this.props后面是.data
因为父文件中子文件的标签的属性已经设置为data={},所以子文件中只能用data接受,当然父文件传递时使用了其他的名字来作为子文件的标签的属性,子文件就要使用相同的名字来接受,否则是接受不到相对应的数据的,而传递的数据js中的大多数类型都是支持的,我们使用最方便的还是对象和数组类型的
父传子(这里使用了点击触发事件来向父文件传递数据)
在子文件中定义了点击事件
并在函数中实现它,顺便在这里调用父文件传递的函数并执行,这样就可以将子文件的数据向父文件传递了(利用了事件的回调函数)
在父文件中的子标签中定义事件
在函数中实现该事件
e:代表了回调函数传递的参数,并将参数赋值给state中的变量childValue
这时父文件中的标签就可以取到子文件中传递过来的数据了
点击按钮之后的效果图
未点击时的效果图