Question

我正在制作一个组件，并在我的app.js中使用{ placeholder }之类的道具来调用它，但是它总是返回refrenceError：找不到变量占位符。我不明白为什么。

调用：

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

Answer 1

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

props将不会自动传递。它将作为参数传递，并且您的输入组件不接受任何参数，并且您正试图访问变量placeholder，因此得到指出的错误

Answer 2

您的Input根本没有任何道具。您需要将props作为组件函数的参数传递：

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

Answer 3

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

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

}

希望这会有所帮助！

无法使用道具加载组件

3 个答案: