javascript - react.js中如何将值传递给其他功能组件

Question

我想将值传递给其他页面或功能组件，有没有办法做到这一点？这就是我所做的。我已经在传递一个值，但只传递给“Home”组件。我想从“房间”组件传递值，但每次我导航到它的链接。我看不到值，但是，我只能看到“主页”组件中的值。

通过检查浏览器-> 控制台进行了尝试，只有 Home 组件获得了正确的值，Room 组件没有，但它也应该有

localhost:3000/home-> 控制台在这里工作正常，它有“等待”和“接受”以成功响应

localhost:3000/room-> 控制台在这里不起作用，只有“等待”

我想要的是当我单击“主页”组件上的按钮时，控制台的成功也必须显示在localhost:3000/room页面中

这是一个代码沙箱：链接到代码沙箱 只需https://6ot0d.csb.app/home在浏览器右侧输入：

家庭组件

import React, {useState} from 'react'
import {Link} from 'react-router-dom'
import { Button, TextField } from '@material-ui/core';
import Room from './RoomComponent'

function Home(){
    const [joined, setJoined] = useState(false)
    const handleJoin = () => setJoined(true)

    return(
        <React.Fragment>
            <h3>Welcome, Student</h3>
            <Room name={joined ? "joined" : "not joined"} />
            <Button onClick={handleJoin} variant="contained" color="primary">Join Room</Button>
        </React.Fragment>
    )
}

export default Home;

房间组件

import React from 'react'
import {Link} from 'react-router-dom'

function Room(props){

    if(props.name == "joined"){
        console.log("Accept")
    } else {
        console.log("Wait")

    }

    return(
        <React.Fragment>
            <div>Room</div>
        </React.Fragment>
    )
}

export default Room;

主要部件

function Main(){
    return(
        <React.Fragment>
            <Header />
                <Switch>
                <Container maxWidth="sm">
                    <Route path='/home' component={Home} />
                    <Route path='/about' component={About} />
                    <Route path='/room' component={Room} />                
                </Container>
                </Switch>
            {/* <Footer /> */}
        </React.Fragment>
    )
}

export default withRouter(Main);

标签： javascriptreactjs