Компоненты ошибки реквизита на реактив-родной - PullRequest
Новая
       27

Компоненты ошибки реквизита на реактив-родной

0 голосов
/ 11 декабря 2018

У меня есть стилизованный компонент класса ниже, он определяет TextInput и с Icon и местозаполнителем два реквизита. 

import React, { Component } from "react";
import { View, Text, TextInput } from "react-native";
import styled from "styled-components/native";

const StyledView = styled.View`
  ...
`;

const StyledIconView = styled.View`
  ...
`;

const StyledTextInput = styled.TextInput`
  ...
`;

class LoginTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: this.props.text };
  }

  render() {
    const { Icon } = this.props;    // it seems have a problem here
    return (
      <StyledView>
        <StyledIconView>
          <Icon />                  // and here
        </StyledIconView>
        <StyledTextInput
          placeholder={this.state.text}
          onChangeText={searchString => {
            this.setState({ searchString });
          }}
        />
      </StyledView>
    );
  }
}

export default LoginTextInput;

И затем я могу использовать этот компонент для настройки собственного случая. 

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

import LoginTextInput from "./LoginTextInput";
import Icon from "react-native-vector-icons/FontAwesome";
import SimpleIcon from "react-native-vector-icons/SimpleLineIcons";

const UserIcon = () => <Icon name="user-o" size={20} color="#757575" />;

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "Useless Placeholder" };
  }

  render() {
    return (
      <View>
        /* <LoginTextInput text="input use name" Icon={UserIcon} /> */
        <LoginTextInput text="input use name" Icon={<UserIcon />} />
      </View>
    );
  }
}

export default Login;

Но этот код не может быть скомпилирован и выдает ошибку "expect a string or a class/function, but get: undefined".

Я отмечаю ошибку выше, кажется, что Icon реквизиты не могут быть определены в этом коде.

РЕШЕНИЕ

Поскольку я используюкомпонент UserIcon, поэтому его следует изменить на <UserIcon / >.

...