React——03children属性

简介: children属性

Children是顶层API之一;this.props.的对象属性和组件属性是一一对应的,但是有一个例外,this.props.children是组件所有的子节点

先看代码

class App extends Component{
    render(){
        return(
            <div>
                {this.props.children}
            </div>
        )
    }
}
const Title = (props)=>(<p>我是一个类组件{props.children}</p>)
ReactDOM.render(<App><p>hello</p><Title>title</Title></App>,document.querySelector('#root'))

都可以拿到值,如下所示

7371897099f64924baba9ad89592a51b.png

children可以是组件,也可以是文本节点,甚至可以传一个函数

传一个函数的写法如下:

class App extends Component{
    render(){
        return(
            <div>
                {this.props.children()}
            </div>
        )
    }
}
ReactDOM.render(<App>{()=>{console.log('传了一个函数');}}</App>,document.querySelector('#root'))

效果如下:

53e42ad56b014a54bbfc2cc889cc70fa.png



相关文章
|
6月前
|
前端开发
react-router中的render、children、component
react-router中的render、children、component
204 1
|
6月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
6月前
|
前端开发 数据库
第七章 react组件实例中三大属性之props
第七章 react组件实例中三大属性之props
|
2月前
|
前端开发
React属性之context属性
React中的Context属性用于跨组件传递数据,通过Provider和Consumer组件实现数据的提供和消费。
35 3
|
1月前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
36 0
|
2月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
58 13
|
6月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
2月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
65 0
|
3月前
|
JavaScript 前端开发 容器
React组件属性refs(七)
【8月更文挑战第14天】React组件属性refs(七)
51 0
React组件属性refs(七)
|
3月前
|
前端开发 JavaScript