05 props (属性)

11/26/2021 react

组件 & Props – React (opens new window)

<body>
  <!-- 准备好一个“容器” -->
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel,用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    //创建组件
    class Person extends React.Component {
      render() {
        // console.log(this);
        const { name, age, sex } = this.props;
        return (
          <ul>
            <li>姓名:{name}</li>
            <li>性别:{sex}</li>
            <li>年龄:{age + 1}</li>
          </ul>
        );
      }
    }
    //渲染组件到页面
    ReactDOM.render(
      <Person name="jerry" age={19} sex="男" />,
      document.getElementById("test1")
    );
    ReactDOM.render(
      <Person name="tom" age={18} sex="女" />,
      document.getElementById("test2")
    );

    const p = { name: "老刘", age: 18, sex: "女" };
    // console.log('@',...p);
    // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
    ReactDOM.render(<Person {...p} />, document.getElementById("test3"));
  </script>
</body>
  • ...p 这种写法仅在 jsx 中可以,babel 编译做了特殊处理
  • props 是只读的

在一般 js 代码中,let obj = ...p 是无效的。(注意 jsx 中的大括号是特殊语法,表示里面是 js 表达式,在这里不是定义对象的意思)

# 对属性进行检查

使用 PropTypes 进行类型检查 – React (opens new window)

//对标签属性进行类型、必要性的限制
Person.propTypes = {
  name: PropTypes.string.isRequired, //限制name必传,且为字符串
  sex: PropTypes.string, //限制sex为字符串
  age: PropTypes.number, //限制age为数值
  speak: PropTypes.func, //限制speak为函数
};
//指定默认标签属性值
Person.defaultProps = {
  sex: "男", //sex默认值为男
  age: 18, //age默认值为18
};

# 简化写法,将对类的属性(静态属性)定义,写到类的定义中

  • 使用 static 简化定义
class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

#

constructor – React (opens new window)

构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props

  • 最佳实践:要么不写构造器,要么接收和使用 super 处理 props
	<script type="text/babel">
		//创建组件
		class Person extends React.Component{

			constructor(props){
				//构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props
				// console.log(props);
				super(props)
				console.log('constructor',this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name:PropTypes.string.isRequired, //限制name必传,且为字符串
				sex:PropTypes.string,//限制sex为字符串
				age:PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值
			static defaultProps = {
				sex:'男',//sex默认值为男
				age:18 //age默认值为18
			}
			
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错,因为props是只读的
				return (
					<ul>
						<li>姓名:{name}</li>
						<li>性别:{sex}</li>
						<li>年龄:{age+1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>

# 函数组件使用 props

使用 PropTypes 进行类型检查 – React (opens new window)

  • 函数组件只能使用 props,不能使用 state 和 refs (做一个纯函数组件/无状态组件)
  • 通过参数使用 props
	<script type="text/babel">
		//创建组件
		function Person (props){
			const {name,age,sex} = props
			return (
					<ul>
						<li>姓名:{name}</li>
						<li>性别:{sex}</li>
						<li>年龄:{age}</li>
					</ul>
				)
		}
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传,且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
更新时间: Saturday, November 27, 2021 20:49