react组件&props

组件&props

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件与 class 组件

React可以通过 class 和 函数 **两种形式创建组件, 但是在函数组件中打印this**,我们获取的是undefined. 这个问题我们暂时先不讨论, 大家知道有这两种方式,接下来还是用我们熟悉的 class形式进行演示.

var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>{msg}</h2>
      </div>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));

比如函数形式:

var msg = 'hello,world';
function HelloWorld(){
  console.log(this); // undefined
  return (
    <div>
      <h2>{msg}</h2>
    </div>
  )
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));

组合组件

组件可以随意组合和嵌套,我们把三个 <HelloWorld/>组件放到 <Demos /> 组件中,并且渲染<Demos /> 组件.
注意: 任何组件有且只有一个 根节点 .

var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>{msg}</h2>
      </div>
    )
  }
}
class Demos extends React.Component {
  render(){
    return (
      <div>
        <HelloWorld/>  
        <HelloWorld/>  
        <HelloWorld/>  
      </div>
    )
  }
}


// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<Demos />,document.getElementById('root'));

props给组件传参

props是组件的属性,可以通过props获取组件外部传递的属性和值. 可以同时传递多个参数,通过参数名称获取.

var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>组件: {this.props.value}</h2>
        {this.props.componentName?<p>{this.props.componentName}</p>:<p>未命名</p>}
      </div>
    )
  }
}
class Demos extends React.Component {
  render(){
    return (
      <div>
        <HelloWorld value={1} componentName="组件1"/>  
        <HelloWorld value={2}/>  
        <HelloWorld value={3}/>  
      </div>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<Demos />,document.getElementById('root'));

Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。