Javascript 无法使用道具加载组件

我正在制作一个组件，并在我的app.js中调用它，里面有像{placeholder}这样的道具，但它总是返回一个referenceError：找不到变量占位符。我不明白为什么

称之为：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
import { Input } from './components/input'
import { Button } from './components/button'

export default class App extends React.Component {
  state = {
    email: '',
    password: '',

  }



  render() {
    return (
      <View style={styles.container}>
      <Input
        placeholder='Enter your email'
        label='Email'
        onChangeText={password => this.setState({ password })}
        value={this.state.password}
      />
        <Input
          placeholder='Enter your password'
          label='Password'
          secureTextEntry
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />
        <Button>Login</Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
});

以及组件

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

const Input = () => {
  return (
    <View>
      <Text style={styles.label}>Label</Text>
      <TextInput
        style={styles.input}
        placeholder={ placeholder }
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
    width: '100%',
    borderColor: '#eee',
    borderBottomWidth: 2,
  },
  label: {
    padding: 5,
    paddingBottom: 0,
    color: '#eee',
    fontSize: 17,
    fontWeight: '700',
    width: '100%'
  },
  input: {
    paddingRight: 5,
    paddingLeft: 5,
    paddingBottom: 2,
    backgroundColor: '#eee',
    fontSize: 18,
    fontWeight: '700',
    width: '100%',
  }
})

export { Input };

你的输入根本不需要道具。您需要将道具作为组件函数的参数传递：

const Input = (props) => {
  return (
    <View>
      <Text style={styles.label}>Label</Text>
      <TextInput
        style={styles.input}
        placeholder={ props.placeholder }
        />
    </View>
  );
}

在输入组件中接受props作为参数，然后使用props访问占位符。您需要将输入组件的代码更改为

const Input = (props) => {
return (
  <View>
    <Text style={styles.label}>Label</Text>
    <TextInput
      style={styles.input}
      placeholder={ props.placeholder }
    />
  </View>
);

}

希望这会有帮助

const Input = ({ placeholder }) => { //<==== here
  return (
    <View>
      <Text style={styles.label}>Label</Text>
      <TextInput
        style={styles.input}
        placeholder={ placeholder }
        />
    </View>
  );
}

道具不会自动传入。它将作为一个参数传入，而您的输入组件不接受任何参数，并且您正试图访问变量占位符，因此得到所述错误

可能重复的