React(7)-组件通信render

卷心菜007

已于 2022-08-25 13:36:42 修改

阅读量297

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-08-22 22:11:52 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/126473934

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

if+组件

函数组件/UI组件/简单组件

function Welcome(props){

return <h1>Welcome back</h1>

}

function Login(props){

return <h1>Please Login First</h1>

}

function Greeting(props){

const isLogin = props.isLogin

if(isLogin){

return <Welcome />

}else{

return <Login />

}

}

let vDOM = <Greeting isLogin = {true}> //Welcome back

// let vDOM = <Greeting isLogin = {false}> //Please Login First

ReactDOM.render(vDOM,document.getElementById("app"))

类组件和函数组件整合

function LoginButton(props){

return <button onClick = {props.login}>Login</button>

}

function LogoutButton(props){

console.log(props)

return <button onClick = {props.logout}>Logout</button>

}

function LoginButton(props){

return <button>Login</button>

}

class App extends React.Compontent{

state = {isLogin:false} // 默认未登录

//登录行为

handleLogin=()=>{

this.setState({

isLogin:true

                })

        }

//退出行为

handleLogout=()=>{

this.setState({

isLogin:true

                })

        }

render(){

//添加按钮：登录状态时,显示退出；未登录状态时,显示登陆

//写法1：(代码重复率高)

const isLogin = this.state.isLogin;

if(isLogin){

return(

<div>

<Greeting isLogin = {this.state.isLogin}>

<LogoutButton />

</div>

                        )

                }else{

return(

<div>

<Greeting isLogin = {this.state.isLogin}>

<LoginButton />

</div>

                        )

                }

return ( <Greeting isLogin={this.state.isLogin}/> )

//写法2：(三元表达式方式)

          return (

          <div>

          <Greeting isLogin = {this.state.isLogin} />

          { isLogin?<LogoutButton /> : <LoginButton /> }

          </div>

                )

//采用写法二,给按钮绑定行为

          return (

          <div>

          <Greeting isLogin = {this.state.isLogin} />

          {

                                        isLogin ?

                                                <LogoutButton logout = {this.handleLogout}/> :

                                                <LoginButton login = {this.handleLogin}/>

                                }

          </div>

                )

        }

函数组件+&&运算

const unReadEmail = ["news1","news2","news3"]

//const unReadEmail = []

写法3：(&&与运算方式)

(true && express =>返回express ; false && express =>返回false)

function Mailbox(props){

let unReadEmail = props.unReadEmail

rerurn(

<div>

          <h1>Mail Box List</h1>

                  {

                                unReadEmail.length>0

                                &&

                                <h2>you have {unReadEmail.length} unread email</h2>

                  }

</div>

        )

}

ReactDOM.render(

        <Mailbox unReadEmail = {unReadEmail}>,document.getElementById("app"))

遍历

//map遍历数据

let source = [1,2,3,4,5]

let double = source.map(item=>item*2)

console.log(double) //输出[2,4,6,8,10]

//无序列表

let source = [1,2,3,4,5]

let listItems = source.map(item=><li>{item*2}</li>) //<li>自动支持展开

//列表容器

function ListContainer(){

return(

<ul>

{listItems}

</ul>

        )

}

//封装列表容器，支持动态传参

function ListContainer(props){

let {data}= props

        let listItems = source.map(item=><li>{item*2}</li>)

return(

<ul>

{listItems}

</ul>

        )

}

//报警告：Warning:Each child in a list should have a unique "key"prop

//注意：元素key就近数据源

function ListContainer(props){

let {data}= props

        let listItems = source.map(item=><li key={item}>{item*2}</li>)

//key一般比较复杂，需要封装成独立的组件

return(

<ul>

{listItems}

</ul>

        )

}

//封装组件形式的key,消除警告

function ListItem(props){

let {value} = props

        return(

                <li >{value*2}</li>

        )

}

function ListContainer(props){

let {data}= props

   let listItems = data.map(item=><ListItem key={item} value = {item}/>)

//兄弟节点key是唯一的；毫无相关可以不唯一

return(

<ul>

{listItems}

</ul>

        )

}

key的唯一性

在兄弟节点之间必须唯一，在全局下可以不唯一；

function Content(props){

let {id,title,content} = props

        return(

<div>

<h3>{title}</h3>

<h3>{content}</h3>

</div>

        )

}

function Title(props){

let {id,title} = props

return(

<li>{title}</li>

        )

}

function Blogs(props){

let {posts} = props

let sidebar = (

<ul>

                        {

                        post.map(item=><Title key = {item.id} title = {item.title}/>)

                        }

                </ul>

        )

let content = posts.map(item=>{

                <Content key={item.id} title = {item.title} content = {item.content}/>

        })

//content和sidebar在不同节点下,不属于兄弟节点,key值可以相同

return(

<div>

<div>{sidebar}</div>

<div>{content}</div>

</div>

        )

}

const posts = [ // 模拟数据

{id:1,title:"title1",content:"内容1"},

{id:2,title:"title2",content:"内容2"},

]

ReactDOM.render(<Blogs posts={posts}/>,document.getElementById("app"))