• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

通过参数传递

导出默认类消息扩展组件{

州={

messageArr: [

{ id: '1 ',标题: '消息1' },

{ id: '2 ',标题: '消息2' },

{ id: '3 ',标题: '消息3' }

]

}

render() {

返回(

差异

保险商实验所

{

这个。状态。消息数组。map((msgObj)={

返回(

李key={msgObj.id}

{/* 向路由组件传递参数传递参数*/}

链接到={ '/home/message/detail/' msgobj。id“/”msgobj。title } { msgobj。title }/Link

/李

)

})

}

人力资源/

{/* 声明接收参数参数*/}

路由路径='/home/message/Detail/: id/: title ' component={ Detail }/

/ul

/div

)

}

}

const DetailData=[

{ id: '1 ',内容: '你好,北京' },

{ id: '2 ',内容: '你好,上海' },

{ id: '3 ',内容: '你好,广东' }

]

导出默认类详细信息扩展组件{

render() {

控制台。日志(这个。道具);

//接收参数参数

const { id,title }=this.props.match.params

常量查找结果=详细数据。查找((详细对象)={

return detailObj.id===id

})

返回(

差异

liId:{id}/li

小: { title }/李

李内容: {查找结果。content }/Li

/div

)

}

}

通过搜索传递路由参数

导出默认类消息扩展组件{

州={

messageArr: [

{ id: '1 ',标题: '消息1' },

{ id: '2 ',标题: '消息2' },

{ id: '3 ',标题: '消息3' }

]

}

render() {

返回(

差异

保险商实验所

{

这个。状态。消息数组。map((msgObj)={

返回(

李key={msgObj.id}

{/* 向路由组件传递params传递参数 */} {/* <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> */} {/* 向路由组件传递search传递参数 */} <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`} >{msgObj.title}</Link> </li> ) }) } <hr /> {/* 声明接收params参数 */} {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */} {/* 声明接收search参数 ,无需声明接收,正常注册理由即可*/} <Route path="/home/message/detail" component={Detail} /> </ul> </div> ) } }
const DetailData = [
    { id: '1', content: '你好,北京' },
    { id: '2', content: '你好,上海' },
    { id: '3', content: '你好,广东' }
]
export default class Detail extends Component {
    render() {
        console.log(this.props);
        // 接收params参数
        // const { id, title } = this.props.match.params
        //接收search参数
        const { search } = this.props.location
        const { id, title } = qs.parse(search.slice(1))
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        })
        return (
            <div>
                <li>Id:{id}</li>
                <li>Title:{title}</li>
                <li>Content:{findResult.content}</li>
            </div>
        )
    }
}
备注:获取到的search是urlencoded编码字符串,需要借助querystring进行解析   通过state传递路由参数
export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>
                                    {/* 向路由组件传递params传递参数 */}
                                    {/* <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> */}
                                    {/* 向路由组件传递search传递参数 */}
                                    {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`} >{msgObj.title}</Link> */}
                                    {/* 向路由组件传递state传递参数 */}
                                    <Link to={{ pathname: "/home/message/detail", state: { id: msgObj.id, title: msgObj.title } }}  >{msgObj.title}</Link>
                                </li>
                            )
                        })
                    }
                    <hr />
                    {/* 声明接收params参数 */}
                    {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
                    {/* 声明接收search参数 ,无需声明接收,正常注册理由即可*/}
                    {/* <Route path="/home/message/detail" component={Detail} /> */}
                    {/* 声明接收state参数 ,无需声明接收,正常注册理由即可*/}
                    <Route path="/home/message/detail" component={Detail} />
                </ul>
            </div>
        )
    }
}
const DetailData = [
    { id: '1', content: '你好,北京' },
    { id: '2', content: '你好,上海' },
    { id: '3', content: '你好,广东' }
]
export default class Detail extends Component {
    render() {
        console.log(this.props);
        // 接收params参数
        // const { id, title } = this.props.match.params
        //接收search参数
        // const { search } = this.props.location
        // const { id, title } = qs.parse(search.slice(1))
        //接收state参数
        const { id, title } = this.props.location.state || {}
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        }) || {}
        return (
            <div>
                <li>Id:{id}</li>
                <li>Title:{title}</li>
                <li>Content:{findResult.content}</li>
            </div>
        )
    }
}

 

Link to comment
Share on other sites