一, 组件之间在静态中的数据传递
从上面的代码我们可以看出, 两个组件之间的数据是分离, 但如果我们有某种需求, 将数据从一个组件传到另一个组件中, 该如何实现?
场景设计:
将 Home.js 中的 HomeData 传递到 MyScreen.js 中
- import React,
- {
- Component
- }
- from 'react'import MyScreen from "./MyScreen";
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- HomeData: "这是主组件的数据"
- };
- }
- render() {
- return ( < div style = {
- {
- width: "100%",
- height: "300px",
- fontSize: "20px"
- }
- } > <div style = {
- {
- width: "100%",
- height: "100px",
- backgroundColor: "#ff0"
- }
- } > </div>
- <MyScreen/ > <div style = {
- {
- width: "100%",
- height: "100px",
- backgroundColor: "#f0f"
- }
- } > </div>
- </div > )
- }
- }
- export
- default Home 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20(1)方法一:
- 使用临时存储,
- 永久存储或cookie的方式代码如下: Home.js代码如下: import React,
- {
- Component
- }
- from 'react'import MyScreen from "./MyScreen";
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- HomeData: "这是主组件的数据"
- };
- }
- render() {
- return ( < div style = {
- {
- width: "100%",
- height: "300px",
- fontSize: "20px"
- }
- } > <div style = {
- {
- width: "100%",
- height: "100px",
- backgroundColor: "#ff0"
- }
- } > </div>
- <MyScreen/ > <div style = {
- {
- width: "100%",
- height: "100px",
- backgroundColor: "#f0f"
- }
- } > </div>
- </div > )
- }
- componentDidMount = () = >{
- sessionStorage.setItem("HomeData", this.state.HomeData);
- };
- }
- export
- default Home 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 MyScreen.js代码如下:
- import React,
- {
- Component
- }
- from 'react'class MyScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- data: ""
- };
- }
- render() {
- return ( < div style = {
- {
- width: "100%",
- height: "100px",
- fontSize: "12px",
- backgroundColor: "#0ff",
- textAlign: "center",
- lineHeight: "100px"
- }
- }
- onClick = { () = >this.click()
- } > {
- this.state.data
- } < /div>
- )
- }
- click=()=>{
- alert("点击到了!!!!");
- };
- componentDidMount=()=>{
- let HomeData=sessionStorage.getItem("HomeData");
- console.log(HomeData);
- this.setState({
- data:HomeData
- });
- };
- }
- export default MyScreen
- 效果如下:
- 以上使用临时存储的方式, 永久存储和 cookie 的方法类似.
- (2) 方法二: 使用 props 来实现父子组件之间的数据传递
- 上面临时存储的方式用到的是 js 原生的一些知识, 但因为现在是依据 react.js 框架进行开发, 所以提倡使用 react.js 的知识来实现功能.
- Home.js 代码如下:
- import React,{ Component } from 'react'
- import MyScreen from "./MyScreen ";
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- HomeData:"这是主组件的数据"
- };
- }
- render() {
- return (
- <div style={{width:"100 % ",height:"300px ",fontSize:"20px "}}>
- <div style={{width:"100 % ",height:"100px ",backgroundColor:"#ff0 "}}></div>
- <MyScreen data={this.state.HomeData}/>
- <div style={{width:"100 % ",height:"100px ",backgroundColor:"#f0f "}}></div>
- </div>
- )
- }
- }
- export default Home
- MyScreen.js 代码如下:
- import React,{ Component } from 'react'
- class MyScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- };
- }
- render() {
- return (
- <div style={{width:"100 % ",height:"100px ",fontSize:"12px ",backgroundColor:"#0ff ",textAlign:"center ",lineHeight:"100px "}} onClick={()=>this.click()}>
- {this.props.data}
- </div>
- )
- }
- click=()=>{
- alert("点击到了 !! !!");
- };
- }
- export default MyScreen
- props 就相当于一个媒介, 链接这两个组件之间的通道.
- 二, 组件之间在动态中的数据传递
- 从上面我们可以看出, 当页面加载时, 组件之间的数据传递自动执行. 现在我们设计另一个场景.
- 场景: 当点击下列 id 为 div1 后, div2 上的数据发生变化.
- import React,{ Component } from 'react'
- import MyScreen from ". / MyScreen ";
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- HomeData:"这是主组件的数据"
- };
- }
- render() {
- return (
- <div style={{width:"100 % ",height:"300px ",fontSize:"20px "}}>
- <div id="div1 " style={{width:"100 % ",height:"100px ",backgroundColor:"#ff0 "}}onClick={()=>this.div1Click()}></div>
- <MyScreen id="div2 " data={this.state.HomeData}/>
- <div style={{width:"100 % ",height:"100px ",backgroundColor:"#f0f "}}></div>
- </div>
- )
- }
- div1Click=()=>{
- };
- }
- export default Home
- 解决方法:
- Home.js 代码如下:
- import React,{ Component } from 'react'
- import MyScreen from ". / MyScreen ";
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- HomeData:"这是主组件的数据"
- };
- }
- render() {
- return (
- <div style={{width:"100 % ",height:"300px ",fontSize:"20px "}}>
- <div id="div1 " style={{width:"100 % ",height:"100px ",backgroundColor:"#ff0 "}}onClick={()=>this.div1Click()}></div>
- <MyScreen id="div2 "
- ref={ref => this.MyScreenRef = ref}
- dataMyScreen={this.state.dataMyScreen}>
- </MyScreen>
- <div style={{width:"100 % ",height:"100px ",backgroundColor:"#f0f "}}></div>
- </div>
- )
- }
- div1Click=()=>{
- // 将数据传递给子组件
- this.MyScreenRef.setDataMyScreen(this.state.HomeData);
- };
- }
- export default Home"
MyScreen.js 代码如下:
- import React,{ Component } from 'react'
- class MyScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- data:"这是子组件的数据"
- };
- }
- render() {
- return (
- <div style={{width:"100%",height:"100px",fontSize:"12px",backgroundColor:"#0ff",textAlign:"center",lineHeight:"100px"}} onClick={()=>this.click()}>
- {this.state.data}
- </div>
- )
- }
- // 方法名应该与主组件上的一致
- setDataMyScreen=(data)=>{
- this.setState({
- data:data
- });
- };
- click=()=>{
- alert("点击到了!!!!");
- };
- }
- export default MyScreen
通过事件触发, 将数据传到子组件中, 然后使用 this.setState() 进行刷新页面, 将得到的数据渲染上去.
来源: http://www.bubuko.com/infodetail-2723163.html