React学习（六）之父组件向子组件传值

Posted on | | Visitors:
Words count in article: 659 字 | Reading time ≈ 3 分

组件间的关系

继续参考之前的代码App.js。

父子关系

App是父，Header和Home相对于App是子。

兄弟关系

Header和Home是兄弟关系。

父向子传值

父传值

父组件向子组件传值是父组件在调用子组件时，进行传值，以下两种方法都可以，App向Header传值，下边的代码是写在App.js里的。

1
<Header name={"Max"} age={"12"} user={user}/>
1
2
3
<Header name={"Max"} age={12} user={user}>
  <p>I am child</p>
</Header>

这里使用第二种方法。

子使用值

子组件使用父组件传过来的值通过props使用，例如：

1
<div>your name is {this.props.name},your age is {this.props.age}</div>

App.js代码：注意第7行和16行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { Component } from 'react'; //固定写法
import Header from './components/Header';
import Home from './components/Home';

class App extends Component { //ES6写法
  render() {
      //注意这里
    const user={
      name: "Anna",
      hobbies: ["Sports", "Reading"]
    }
    return (
      <div>
        <div>
          <Header name={"Max"} age={"12"} user={user}/>	//传值 age={12}也可以
        </div>

        <div>
          <h1>I am App</h1>
        </div>
      
        <div>
          <Home />
        </div>
      </div>
    );
  }
}

export default App;

Header.js代码：注意第6行和return的内容

this.props就是父组件传过来的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react'; //固定写法


class Header extends Component { //ES6写法
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>Header</h1>
        <div>your name is {this.props.name},your age is {this.props.age}</div>
        
        <div>
          <h4>hobbies</h4>
          <ul>
          {this.props.user.hobbies.map((hobby,i) => <li key={i}>{hobby}</li>)}
          </ul>
        </div>
      </div>
    );
  }
}

export default Header;

参数类型检查

JS是动态语言。

在这里我们对App传过来的值进行检查，理所当然要在Header中检查。

在Header.js中引入静态检查：

1
import PropTypes from 'prop-types';

现在开始检查，设置Header接收到的参数的类型：

1
2
3
4
5
6
Header.propTypes={
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object,
  children: PropTypes.element.isRequired
}

其中children是给Header传参时Header闭合标签里的东西。

最终Header.js代码是这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { Component } from 'react'; //固定写法
import PropTypes from 'prop-types';

class Header extends Component { //ES6写法
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>Header</h1>
        <div>your name is {this.props.name},your age is {this.props.age}</div>
        <div>
          <h4>hobbies</h4>
          <ul>
          {this.props.user.hobbies.map((hobby,i) => <li key={i}>{hobby}</li>)}
          </ul>
        </div>
      </div>
    );
  }
}

Header.propTypes={	//注意p是小写
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object,
  children: PropTypes.element.isRequired
}

export default Header;

作者：@臭咸鱼

本文为作者原创，转载请注明出处：https://chouxianyu.github.io

欢迎转发和评论!