React学习回顾（第五节）

第五节 React 组件之间

我们现在将MyApp 作为一个主组件

​ 我们还需要做一个列表组件，将列表组件放入主组件之中。

class MyApp extends React.Component{
    render(){
        return (
            <div>
                <List />
            </div>
        )
    }
}
class List extends React.Component{
    render(){
        return(
            <div>
                <ul>
                    <li>张三</li>
                    <li>李四</li>
                    <li>王五</li>
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<MyApp />,document.getElementById('app'));

注：

<u>在实际开发中我们不可获取一个人物信息列表肯定不是一个个的写入！ 我们首先解决写入问题。将一个输入放入标签中尝试 { array } 渲染结果发现直接把所有的一个一个挨个渲染出来，那么我们可以把数组改装成我们要渲染的内容及元素标签就完成了我们想要的效果。</u>

将List 组件改成如下

class List extends React.Component{
    render(){
        let userList = ['张三','李四','王五']
        return(
            <div>
                <ul>
                    {
                        userList.map( (item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

//注: key值一定要写入，让React识别他们是不一样的组件，有利于diff计算（VDOM）

数据是从MyApp 中获取的数据我们该怎么办呢 ？？

这时我们需要把数据从MyApp 传入到 List 组件中去。 提供方法props

class MyApp extends React.Component{
    render(){
        let userList = ['张三','李四','王五']
        return (
            <div>
                <List userList={ userList }/>
            </div>
        )
    }
}
class List extends React.Component{
    render(){
        console.log(this);
        return(
            <div>
                <ul>
                    {
                        this.props.userList.map( (item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<MyApp />,document.getElementById('app'));

//注意：请观察打印的数据，我们通过MyApp传参 this.props对象中可以找到传入的值

第五节： 怎么渲染一个列表，怎么在父组件中的数据放入子组件中渲染。