props

PPG007 ... 2023-10-17 About 2 min

# props

props 是传递给 JSX 标签的信息，可以将任意 JavaScript 值传递给一个组件，包括数组、对象和函数。

# 向组件传递 props

<script type="text/babel">
    function PersonInfo(props) {
      return (
        <div>
          <span>{props.person.name}</span>
          <br/>
          <span>{props.person.age}</span>
          <br/>
          <button onClick={props.print(props.person)}>print</button>
        </div>
      );
    }
    const print = (person) => () => {
      console.log(person)
    }
    ReactDOM.render(<PersonInfo person={{name: 'PPG007', age: 23}} print={print}/>, document.getElementById('test'))
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

函数式组件的参数是一个 props 对象，包含组件标签上传递的全部属性，也可以使用对象解构的写法：

function PersonInfo({person, print}) {
    return (
    <div>
        <span>{person.name}</span>
        <br/>
        <span>{person.age}</span>
        <br/>
        <button onClick={print(person)}>print</button>
    </div>
    );
}

1
2
3
4
5
6
7
8
9
10
11

Note

props 是只读的，在组件内不能修改。

类组件的构造函数的入参是 props 对象，用法同函数式组件。

# 使用 JSX 展开语法传递 props

如果一个组件标签的属性过多，写起来很长，可以使用 JSX 的展开语法：

function PersonInfo({person, print}) {
    return (
    <div>
        <span>{person.name}</span>
        <br/>
        <span>{person.age}</span>
        <br/>
        <button onClick={print(person)}>print</button>
    </div>
    );
}
const print = (person) => () => {
    console.log(person)
}
const props = {
    person: {
    name: 'PPG007',
    age: 23
    },
    print: print,
}
ReactDOM.render(<PersonInfo {...props}/>, document.getElementById('test'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 将 JSX 作为子组件传递

组件之间发生嵌套时，父组件的 props 中将增加一个 children 属性：

function Foo() {
    return (
    <div>
        foo
    </div>
    )
}
function Bar({children}) {
    return (
    <div>
        bar
        {children}
    </div>
    )
}
const dom = <Bar><Foo/></Bar>
ReactDOM.render(dom, document.getElementById('test'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Note

如果组件发生了嵌套，那么如果父组件不在自己返回的 JSX 中显式地使用 children 属性，那么嵌套在其中的内容将不会被渲染。

# 类组件传递 props

class Time extends React.Component {
    render() {
    const props = {
        color: this.color,
        time: this.state.time,
    }
    return (
        <div>
        <Display {...props}/>
        {this.children}
        </div>
    );
    }
    constructor(props) {
    super(props);
    const { color, children } = props;
    console.log(color, children)
    this.color = color;
    this.children = children;
    this.state = {
        time: (new Date()).toLocaleTimeString(),
    };
    setInterval(() => {this.setState({time: (new Date()).toLocaleTimeString()})}, 1000)
    }
}

class Display extends React.Component {
    render() {
    const { color, time } = this.props;
    return (
        <div>
        <h2 style={{color: color}}>{time}</h2>
        </div>
    );
    }
}
const dom = <Time color={'skyblue'}><span>123</span></Time>
ReactDOM.render(dom, document.getElementById('test'))

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
31
32
33
34
35
36
37
38

# 使用 PropTypes 对 prop 做限制

prop-types (opens new window)

prop-types 定义了很多限制，可以通过定义组件的 propTypes 静态属性定义校验规则，通过 defaultProps 定义默认值。

function Demo(props) {
    return (
    <button onClick={props.onClick}>{props.text}</button>
    )
}
Demo.defaultProps = {
    text: 'default text',
    onClick: () => {
    console.log('default click')
    }
}
Demo.propTypes = {
    text: PropTypes.string,
}
ReactDOM.render(<Demo text={123}/>, document.getElementById('test'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面的代码中限制了 text 是一个字符串类型，开发环境中控制台会输出报错，类组件使用方式类似，只要定义 propTypes 静态变量即可。

state ref