学习react基础(2)_props、state和style的使用

React组件传递数据

1：父子组件传递数据
组件中有一个只读的对象叫做props，无法给props添加顺序ing
获取方式：函数参数props
作用：酱传递给组件的属性转为props对象中的属性

function Welcome(props){
   
  // props ---> { username: 'zs', age: 20 }
  return (
    <div>
      <div>Welcome React</div>
      <h3>姓名：{
   props.username}----年龄是：{
   props.age}</h3>
    </div>
  )
}

// 给 Hello组件 传递 props：username 和 age(如果你想要传递numb类型是数据 就需要向下面这样)
ReactDOM.reander(<Hello username="zs" age={
   20}></Hello>, ......)

父传子=》使用自定义属性的形式传递，在子组件中使用props来接受。

props和state

props：
作用：给组件传递数据，一般用在父子组件之间
说明：React把数据给组件的属性转化为一个对象并交给props
特点：props是只读的，无法给props添加或者修改属性
props.children：获取组件的内容，比如：组件内容中的 组件内容

//props是一个包含数据的对象参数，不要试图修改props参数
//返回值：react元素

function Welocome(props){
   
    //返回react元素中必须只有一个根元素
    return <div>hello, {
   props.name}</div>
}

class Welocaome extends React.Component{
   
    constructor(props){
   
        super()
    }
    render(){
   
    return <h1>Hello, {
   this.props.name}</h1>
    }
}

state

state:状态==》 数据
作用：用来给组件提供组件内部使用的数据
注意：只用通过class创建的组件才具有 状态
注意：状态是私有的，完全由当前组件来控制
注意：不要在state中添加render()方法中不需要的数据会影响性能。
可以将组件内部使用单数不渲染在视图中的内容，直接添加给this.
注意：不要在render方法中调用setState()方法来修改state的值。
但是可以通过this.state.name="123"的方式设置state（不推荐）

class Hellow extends React.Component{
   
    constrouctor(){
   
    super()
    }
    this.state={
   
        age:19
    }
    render(){
   
    return <div>我的年龄是 ： {
   this.state.age +1 }</div>
    }
}

style样式

// 1. 直接写行内样式：
<li style={
   {
   border:'1px solid red', fontSize:'12px'}}></li>

// 2. 抽离为对象形式
var styleH3 = {
   color:'blue'}
var styleObj = {
   
  liStyle:{
   border:'1px solid red', fontSize:'12px'},
  h3Style:{
   color:'green'}
}

<li style={
   styleObj.liStyle}>
  <h3 style={
   styleObj.h3Style}>评论内容：{
   props.content}</h3>
</li>

// 3. 使用样式表定义样式：
import '../css/comment.css'
<p className="pUser">评论人：{
   props.user}</p>

直接写在行间需要使用{}包裹style对象

参考：https://www.cnblogs.com/williamjie/p/9473970.html