Question

我正在使用mqtt-react来订阅＆＃39; Card_sens＆＃39;组件到特定主题。这个主题是动态的，是传递给＆＃39; Card_sens＆＃39;的两个道具的组合。问题是我无法访问＆＃39; Card_sens＆＃39;之外的道具。类。

有任何想法可以解决这个问题吗？

我搜索了类似的问题，但没有发现任何相关的问题。

以下是代码：

import React, { Component } from 'react'
import { Card, Icon} from 'semantic-ui-react'
import { subscribe } from 'mqtt-react';
var global_id_a='';
var global_id_s='';

class Card_sens extends Component {
  constructor(props) {
     super(props);
     global_id_a=this.props.id_a;
     global_id_s=this.props.key;
}

  render(){
  return(
  <Card key={this.props.key}>
    <Card.Content >
      <Card.Header >
      <Icon name='code' size='large' />  {this.props.name}
      </Card.Header>
  </Card>
)
}
}

export default subscribe({
  topic: 'data/#' + global_id_a + '/' + global_id_s     //this doesn't work 
})(Card_sens)

修改我使用订阅的导出Card_sens组件，如下所示：

<Card_Sens key={sensore.id_sens} id_a={sensore.id_a} />

添加功能组件作为包装器：

    import React, { Component } from 'react'
    import { Card, Icon} from 'semantic-ui-react'
    import { subscribe } from 'mqtt-react';

   const Wrapper = (props) => {

    id_a= props.id_a;
    key= props.key;
        class Card_sens extends Component {

         render(){
          return(
          <Card key={this.props.key}>
            <Card.Content >
              <Card.Header >
              <Icon name='code' size='large' />  {this.props.name}
              </Card.Header>
          </Card>
        )
        }
        }

        export default subscribe({
          topic: 'data/#' + id_a + '/' + key     //this doesn't work either. ERROR: 'import' and 'export' may only appear at the top level
        })(Card_sens)
    }

做这样的事情：

 import React, { Component } from 'react'
    import { Card, Icon} from 'semantic-ui-react'
    import { subscribe } from 'mqtt-react';

   const Wrapper = (props) => {

    id_a= props.id_a;
    key= props.key;
        class Card_sens extends Component {

         render(){
          return(
          <Card key={this.props.key}>
            <Card.Content >
              <Card.Header >
              <Icon name='code' size='large' />  {this.props.name}
              </Card.Header>
          </Card>
        )
        }
        }

        return subscribe({
          topic: 'data/#' + id_a + '/' + key    
           })(Card_sens)
        }
export default Wrapper

返回这两个错误：

警告：Wrapper（...）：必须是有效的React元素（或null）回。您可能已经返回undefined，数组或其他一些无效的对象。
未捕获错误：包装器（...）：有效的React元素必须返回（或null）。您可能已经返回undefined，一个数组或其他一些无效的对象。

如果您在文件的顶层使用subscribe({topic: 'data/#'})(Card_sens) 而不是，它似乎不会返回元素。如果你在文件的顶层使用subscribe({topic: 'data/#'})(Card_sens)它返回一个有效的元素，一切正常（但我不能以这种方式动态地订阅主题）我感到困惑。我做错了什么？

Answer 1

很难说因为 mqtt-react 的文档没有说明这一点。我想你可以通过添加额外的功能组件作为包装来实现目标。例如：

{{1}}

如何在课堂外使用道具？

1 个答案: