Question

我想将一个函数传递给子组件-应该非常简单。这是我的渲染：

  render() {
    const responses = this.state.responses;
    return (
      <View style={styles.container}>
        {
          responses
          ? <ScrollView style={{flex: 1}}>
              <Header />
                <Wrapper responses={responses} sendMessage={this.sendMessage}/>
              <Footer/>
            </ScrollView>
          : <Loading />
        }
      </View>
    );
  }

这是我的构造函数，将函数绑定到“ this”：

  constructor(props) {
    super(props);

    this.state = {
      "sensors": null,
      "responses": null
    };

    this.connectSockets = this.connectSockets.bind(this);
    this.sendMessage = this.sendMessage.bind(this)
  }

我要传递的函数如下：

  sendMessage(techPhoneNumber, dangerMessageForTech) {
    return SMS.text(techPhoneNumber, dangerMessageForTech);
  }

但是，子组件正在获取一个空对象，当我在“包装器”组件上断开并将鼠标悬停在“ sendMessage”道具上时，我看到了：

"message": "sendMessage is not defined"

当我将鼠标悬停在“响应”上时，我看到了数据。我不确定我在这里缺少什么...帮助？

编辑这与SMS模块无关，因为当我尝试向下传递任何其他功能时，我得到的结果是相同的...我使用的是react native，但应该相同？

我正在包装器组件中访问sendMessage：

export default Wrapper = ({responses}, sendMessage) => {
    //do stuff
}

Answer 1

嗯，您的代码有问题，

这是正确的方法：

export default Wrapper = ({responses, sendMessage}) => {
    //do stuff
}

这是您的包装器组件背后的原因，它只使用sendMessage和responses作为其属性来获取一个Object作为其参数。

另一种正确的方法是：

export default Wrapper = (props) => {
    const {responses, sendMessage} = props; // or directly using props.responses and props.sendMessage
    //do stuff
}

Answer 2

应该是

export default Wrapper = ({responses, sendMessage}) => {
    //do stuff
}

OR：

使用道具进行访问。

export default Wrapper = (props) => {
        //do stuff
        //props.responses, 
        //props.sendMessage()
    }

Answer 3

根据您的代码，我认为还可以：

render() {
const responses = this.state.responses;
return (
  <View style={styles.container}>
    {
      responses
      ? <ScrollView style={{flex: 1}}>
          <Header />
            <Wrapper responses={responses} sendMessage={this.sendMessage}/>
          <Footer/>
        </ScrollView>
      : <Loading />
    }
  </View>
);
}

但是我已经纠正了

 constructor(props) {
super(props);

this.state = {
  "sensors": null,
  "responses": null
};

this.connectSockets = props.connectSockets.bind(this);
this.sendMessage = props.sendMessage.bind(this)
 }

Answer 4

尝试使用箭头功能代替绑定

sendMessage = (techPhoneNumber, dangerMessageForTech) => {
return SMS.text(techPhoneNumber, dangerMessageForTech); }

和

<Wrapper responses={responses} sendMessage={this.sendMessage}/>

Answer 5

将您的包装器组件更改为

> export default Wrapper=({responses,sendMessage}){

//Do stuff

}

Answer 6

我最终只是将SMS模块导入需要它的组件，并在“ onPress”道具的一个函数内调用了它，从而解决了当前的问题。如果我在正确解构“ props”对象时无法将任何函数作为props传递给我，我将进一步研究，并可能会发布赏金。

未定义包含属性的React prop

6 个答案: