react props进阶 children属性

children属性，表示组件标签的子节点，当组件标签有子节点时，props就会有该属性，与与普通的props一样，其值可以使任意类型。

# 父组件

class App extends React.Component {

  render() {

    return (

        <div>

          <Cmp>我是children中的值</Cmp>

        </div>

    )

  }

}

 

# 子组件

{props.children} 获取数据

 

import React, { Component } from 'react'


// 购物车组件
import Cart from './pages/Cart'
import Cmp1 from './pages/Cmp1'

export default class App extends Component {
  state = {
    cnt: '中午去吃饭，xxx好的'
  }
  render() {
    return (
      <div>
        {/* 购物车组件 显示组件 */}
        <Cart />
        {/* props.children 获取组件内中的数据 插槽 slot */}
        <Cmp1>
          {this.state.cnt}
          {/* <Sub />
          {this.state.username} */}
        </Cmp1>
      </div>
    )
  }
}

 

import React, { Component } from 'react';

// 功能组件
class Cmp1 extends Component {
  render() {
    return (
      <div>
        {
        this.props.children.replace(/x/ig,'*')
        }
      </div>
    );
  }
}

export default Cmp1;