react 组件嵌套的使用

组件嵌套

• 内层组件使用外部组件的数据
• 注意组件的拆分，分析数据的传入类型

// 定义外部组件
class App extends React.Component{
    render(){
        let arr = this.props.arr;
        return(
            <div>
                {
                    arr.map((item,index)=>{
                        return <Welcome key={index} arr={item} />
                    })
                }
            </div>
        )
    }
}
// 定义内部组件
function Welcome(props) {
    return <h1>Welcome {props.arr}</h1>
}
// 定义数据
let arr = ["张三","李四","王五"];
// 渲染
ReactDOM.render(<App arr={arr} />,document.getElementById("example") )