React进阶（七）：props 属性介绍_props 消息的基本属性集，web开发基本步骤

用户33914928060
29 阅读2分钟

前端资料汇总

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。 找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。 最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

开源分享：docs.qq.com/doc/DSmRnRG…

  1. 每个组件对象都会有props（properties的简写）属性;

  2. 组件标签的所有属性都保存在props中;

  3. 内部读取某个属性值：this.props.propertyName;

  4. 作用：通过标签属性从组件外向组件内传递数据（只读 read only）;

  5. 对props中的属性值进行类型限制和必要性限制;

Person.propTypes = {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number.isRequired
}
  1. 扩展属性：将对象的所有属性通过props传递
<Person {...person}/>
  1. 默认属性值
Person.defaultProps = {
  name: 'Mary'
};

二、Demo

/\*
 1. 拆分组件: 拆分界面, 抽取组件
 \* 单个标题组件: Welcome
 \* 应用组件: App
 2. 分析确定传递数据和数据类型
 \* Welcome: props.name string
 \* App: props.names array
 \*/

  //定义内部标题组件
  class Welcome extends React.Component {
    render() {
      return <h2>Welcome {this.props.name}!</h2>;
    }
  }
  Welcome.propTypes = {
    name: React.PropTypes.string.isRequired
  };
  //定义外部应用组件
  class App extends React.Component {
    render() {
      return (
        <div>
          {
            this.props.names.map(
              (name, index) => <Welcome name={name} key={index}/>
            )
          }
        </div>
      );
    }
  }
  App.propTypes = {
    names: React.PropTypes.array.isRequired
  };

  var names = ['Tom', 'Jack', "Bob"];
  ReactDOM.render(<App names={names}/>, document.getElementById('example'));

三、拓展阅读

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

avatar
文章
阅读
粉丝