无法使用道具加载组件答案

【问题标题】：Can't load components with props无法使用道具加载组件
【发布时间】：2019-01-04 04:09:06
【问题描述】：

我正在制作一个组件并在我的 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 };

【问题讨论】：

Passing/Accessing props in stateless child component的可能重复

标签： javascript react-native

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>
);

}

希望这会有所帮助！

【讨论】：