如何使用 react js/react native 中的函数发送 prop 值

Question

在我的应用程序中，我使用了一个 ErrorMessage 组件，它负责在文本中用不同颜色的不同消息显示错误消息。

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class ErrorMessage extends Component {
constructor(props) { 
super(props);

this.state = {
};
}

render() {
  //console.log("props:",this.props);
  //debugger;
return (
  <View style={styles.form}>
    <Text style={{color:this.props.color}}> {this.props.ErrorMessage} </Text>
  </View>
);
}

}
const styles = StyleSheet.create({
form: {
},
});

我尝试在以下可能的情况下使用我的组件

<ErrorMessage ErrorMessage={()=>{getMessage()}} color={props.color} />
  or 
<ErrorMessage ErrorMessage={getMessage} color={props.color} />
or
<ErrorMessage ErrorMessage={getMessage()} color={props.color} />

我的 getMessage 函数如下所示

 const getMessage = ()=> {
 console.log("get message:state"+state)
   if (state == 2) {
      // error
      return "Please enter valid user id";
   }
   if (state == 3) {
      // warning
      return "Please enter min 3 char";
   }  else {
      // success
     return "Valid user id";
   }

};

但在所有情况下，应用程序都会抛出警告 "React Native – 警告：函数作为 React 子项无效。如果您 return 组件而不是渲染组件，则可能会发生这种情况. 或者您可能打算调用此函数而不是 return 它。"* 并且应用程序未执行 getMessage 函数体"*

请建议我们如何使用函数 return 数据将 prop 发送到组件。

Answer 1

重命名道具，并像这样称呼它

<ErrorMessage Message={getMessage()} color={props.color} />

如何使用 react js/react native 中的函数发送 prop 值

How to send prop value using function in react js/react native

reactjs

react-native

react-component