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

我正在使用高速公路，我不知道如何在另一个组件中使用相同的连接

我决定通过将

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 {
componentDidMount(){
console.log(this.props.session)

}

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

export default Two;

---

也许你可以试试这样的东西：

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>
    )
  }
}

  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>
    )
  }
}

let sessionVar=未定义
类应用程序扩展组件{
组件willmount（）{
这个。Call（）；
}
呼叫=（）=>{
var connection=new autobahn.connection（{url:'ws://127.0.0.1:9000/'，realm1'}）；
connection.onopen=函数传递（会话）{
log（会话“我想在另一个组件中使用它”）
sessionVar=会话
};
connection.open（）；
}
render（）{
返回(
)
}
}

您还可以使用state，这样可能会更容易：

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>
    )
  }
}

  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>
    )
  }
}

Call=（）=>{
var connection=new autobahn.connection（{url:'ws://127.0.0.1:9000/'，realm1'}）；
connection.onopen=函数传递（会话）{
log（会话“我想在另一个组件中使用它”）
this.setState（{session}）
};
connection.open（）；
}
render（）{
返回(
)
}
}

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

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 {
componentDidMount(){
console.log(this.props.session)

}

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

export default Two;

第二类扩展组件{
componentDidMount（）{
console.log（this.props.session）
}
render（）{
返回(
子组件
)
}
}
导出默认值2；

也许您可以尝试以下方法：

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>
    )
  }
}

  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>
    )
  }
}

let sessionVar=未定义
类应用程序扩展组件{
组件willmount（）{
这个。Call（）；
}
呼叫=（）=>{
var connection=new autobahn.connection（{url:'ws://127.0.0.1:9000/'，realm1'}）；
connection.onopen=函数传递（会话）{
log（会话“我想在另一个组件中使用它”）
sessionVar=会话
};
connection.open（）；
}
render（）{
返回(
)
}
}

您还可以使用state，这样可能会更容易：

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>
    )
  }
}

  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>
    )
  }
}

Call=（）=>{
var connection=new autobahn.connection（{url:'ws://127.0.0.1:9000/'，realm1'}）；
connection.onopen=函数传递（会话）{
log（会话“我想在另一个组件中使用它”）
this.setState（{session}）
};
connection.open（）；
}
render（）{
返回(
)
}
}

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

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 {
componentDidMount(){
console.log(this.props.session)

}

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

export default Two;

第二类扩展组件{
componentDidMount（）{
console.log（this.props.session）
}
render（）{
返回(
子组件
)
}
}
导出默认值2；

如果我将

让sessionVar

从调用函数中取出，我得到的

编译失败

如果我将

让sessionVar

放入调用函数中，我得到的

sessionVar未定义

请帮助如何？你想要屏幕截图吗？我真的不知道为什么这个.setState in Pass函数在控制台中不工作，没有错误。请确保屏幕截图或只是将错误粘贴在这里，顺便说一句，它是“This”，小写为“t”，如果我将

let sessionVar

放入内部调用函数，就可以了，但是如果我把

让sessionVar

从调用函数中放出来，我会得到

取消查找sessionVar

如果我把

让sessionVar

放在调用函数中，我会得到

编译失败

如果我把

让sessionVar

放在调用函数中，我得到的

sessionVar没有定义

请帮助如何？你想要屏幕截图吗？我真的不知道为什么这个.setState in Pass函数在控制台中不工作，没有错误。请确保屏幕截图或只是将错误粘贴在这里，顺便说一句，它是“This”，小写为“t”，如果我将

let sessionVar

放入内部调用函数，就可以了，但是我从