将函数参数传递给另一个组件 reactjs

IT技术 javascript reactjs autobahn
2021-05-17 15:56:45

我正在使用 AutobahnJS 我不知道如何在另一个组件中使用相同的连接。

我决定通过将session参数传递给另一个像这样的组件来手动制作它，但这不起作用我不知道为什么

主要成分：

class App extends Component {


   componentWillMount(){
     this.Call();
    }

  Call = () => {
    var connection = new autobahn.Connection({ url: 'ws://127.0.0.1:9000/', realm: 'realm1' });

    connection.onopen = function Pass (session) {
      console.log(session, 'This I want to use it in anothr component')
    };

    connection.open();
  }
  render() {
    return (
        <div>
        <Two Pass={this.Pass} />
        </div>
    )
  }
}

export default App;

子组件

class Two extends Component {

this.props.Pass(session); // if I console.log session will get error
//How to console log session here

  render() {
    return (
        <div>
       Child component
        </div>
    )
  }
}

export default Two;

在另一个组件中使用高速公路的相同连接（会话）的最佳方法是什么？

更新

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNumber: 1
    }
    this.sessionVar = this.sessionVar.bind(this)
  }
1个回答

也许你可以尝试这样的事情：

let sessionVar = undefined
class App extends Component {


   componentWillMount(){
     this.Call();
    }
  Call = () => {
    var connection = new autobahn.Connection({ url: 'ws://127.0.0.1:9000/', realm: 'realm1' });

    connection.onopen = function Pass (session) {
      console.log(session, 'This I want to use it in anothr component')
      sessionVar = session
    };

    connection.open();
  }
  render() {
    return (
        <div>
        <Two Pass={this.Pass} session={sessionVar} />
        </div>
    )
  }
}

你也可以使用 state ，看起来像这样可能会更容易：

  Call = () => {
    var connection = new autobahn.Connection({ url: 'ws://127.0.0.1:9000/', realm: 'realm1' });

    connection.onopen = function Pass (session) {
      console.log(session, 'This I want to use it in anothr component')
      this.setState({session})
    };

    connection.open();
  }
  render() {
    return (
        <div>
        <Two session={this.state.session} />
        </div>
    )
  }
}

然后您可以在您的子组件中执行此操作：

class Two extends Component {
componentDidMount(){
console.log(this.props.session)

}

  render() {
    return (
        <div>
       Child component
        </div>
    )
  }
}

export default Two;
其它你可能感兴趣的问题
上一篇在新页面上渲染嵌套路由组件 下一篇React JS react-router-dom 导致 404