Props

父组件向子组件传输数据：

子组件接收父组件的数据（props）：

子组件接收的值是只读的（要像纯函数一样使用props参数）

在一个函数内 不改变接收的参数称为纯函数

React属性
class Namecard extends React.Component {
    render(){
      const { name, number, isHuman, tags } = this.props
      return(
        <div>
          <h4>{name}</h4>
          <ul>
           <li>电话：1234567890</li>
           <li>{ isHuman ? '人类' ：'外星生物'}</li>
           <hr/>
           <p>
           { tags.map((tag, index) => (
               <span> {tag}</span>
           ))}
           </p>
          </ul>
        </div>
      )
    }
}
export default NameCard

Props（属性）

组件像一个函数一样，接受特定的输入（props），产出特定的输出（React elements）

V = f(props)

bootstrap安装： npm install bootstrap --save

 Props案例

 实现

截图

Props：组件就像一个函数一样，接收特定的输入（props），产出特定的输出（React elements）

V = f(props)

jilu

引用 bootstarp

npm install  bootstarp --save

组件的Props/State/Forms

Props（属性)

• 组件(Component)会根据属性(Props)的不同，渲染出不同的效果

• 组件就像是一个函数一样，接受特定的输入(props)，产生特定的输出(React elements)

• V = f(props)

 Props是只读的，不能在Component里改写它的值，必须要向纯函数一样使用它

其他Notes:

ES6里的析构写法

const { name, number, isHuman, tags} = this.props

引入bootstrap之后，可以直接在JSX里调用一些classes，比如alert, alert-success

reactComponent必须像纯函数一样使用props（不能改变输入值）

将bootstrap在index中引入，就能够让下面的NameCard能够使用，不用再次引用。

组件像一个函数一样，接受特定的输入（props），产出特定的输出（React elements）

V = f(props)

注意：函数式hocks 没有 render ( ) { } 部分，直接是 return ( ) 

?

注意：函数式hocks 没有 render ( ) { } 部分，直接是 return ( ) 。

props 要求按纯函数使用，即不能改变其值！

props　是纯函数,　值不能改变.

Props（属性）

组件—函数，输入—输出

V = f(props)

例： 一张名片

样式：bootstrap foo，通过npm安装在my-first-react工程文件夹中

在index.js中引用bootstrap

属性是只读的

纯函数：不改变函数的值

非纯函数

jsx只支持纯函数

传入的属性props是只读的，不能修改值（错误如视频右侧显示）

组件可以写成函数的形式

Props（属性）

组件—函数，输入—输出

V = f(props)

例： 一张名片

样式：bootstrap foo，通过npm安装在my-first-react工程文件夹中

在index.js中引用bootstrap

属性是只读的

纯函数：不改变函数的值

非纯函数

jsx只支持纯函数

props

组件像一个函数一样，接受特定的输入（props），产出特定的输出（React elements）

V = f(props)

遇到一个错误

Uncaught TypeError: Super expression must either be null or a function, not undefined

因为Component的首字母小写了

实例 - 名片

Props属性

所有的组件必须像纯函数一样使用变量，变量值是不可以改变的