Question

我是新来响应js的人，我正在尝试将数据/状态从组件A转移到组件B，我知道这听起来很简单，但是我尝试了很多示例，但未能做到。问题有点不同：我尝试过createContenxt

export const AContext = React.createContext('test');
class A extends Component {
      constructor(props){
          this.state = { id: this.props.aStore.id()}}

     if login success go to component C:
       <AContext.Provider value="test">
       <Route render={(props) => <C {...props} id={this.state} />} />
       </AContext.Provider>

class C extends Component {
      <Sidebar routes={dashboard}>

const dashboard = {path: "/b",
  sidebarName: "b",
  navbarName: "b",
  icon: IconDashboard,
  component: B}

import {AContext} from './A';
class B extends Component {
  static contextType = AContext;

render(){ console.log(this.context)} //=> empty object

这里是关于代码如何工作的想法，现在我必须将ID放入组件B，我设法通过C传递了ID，但是如何将其传递给const仪表板和组件B？

Answer 1

最好像这样构建React页面：

return(
    <div>
        { shouldGoHere ? <SomeComponent props={this.state.propsGoHere} /> : null }
        { shouldGoThere ? <OtherComponent props={this.state.propsGoThere} /> : null }
    </div>
)

但是使用React Router更好

import { BrowserRouter, Route } from 'react-router-dom'

...

return(
    <div>
        <BrowserRouter>
            <Route exact to="/" component={HomeComponent} props={this.state.propsGoHere} />
            <Route exact to="/otherComponent" component={OtherComponent} props={this.state.MorePropsHere} />
        </BrowserRouter>
    </div>
)

使用此代码段，您可以轻松地控制将哪些数据输入到哪个组件中，并且还可以更轻松地浏览应用程序。

通过const将数据从一个组件转换为另一个组件？

1 个答案: