关于react的问题

Question

import React,{ Component } from 'react';

class SearchBar extends Component {
    constructor(props){
        super(props);

        this.state = {term : ''};
    }
    render() {
        return <input onChange={event => this.setState( { term:event.target.value } )} />;
    }

}



export default SearchBar;

这里的props指的是什么？怎么理解？

Answer 1

这是一个属性的集合，元素为当前组件的所有属性的键值对

例如你在渲染组件时使用这样语法：

<SearchBar name="search" a="a" b="b"/>

那么props就是：

props: {
    
    name:search,
    a:a,
    b:b

}

Answer 2

props不是数组，是对象。就是组件从外部获得的props，和你在其他地方写的this.props是一个东西

Answer 3

JSX:

    ReactDOM.render(<SearchBar placeHolder='搜索' />,document.querySelector('.app'));

JS:

    ReactDOM.render(SearchBar({placeHolder:'搜索'}),document.querySelector('.app'));

placeHolder属性会传入组件的props对象内--->{placeHolder:'搜索'}