Question

我现在正从其他技术转移到React Native，但遇到了问题。我有一个演示组件<TaskInput />。

const TaskInput = (props: ITaskInputProps) => {
      return (
            <View style={styles.container} >
                  <Text style={styles.title}>{props.title}</Text> 
                  <TextInput
                     style={styles.input}
                     multiline
                     scrollEnabled={false}
                  />
            </View>
      )
}

TaskInput上的ParentComponent

import React from 'react';
import { View } from 'react-native';
import styles from './styles';
import TaskInputContainer from '../task-input';

interface ITaskConfigurationProps {
      title: string,

      isInputForm?: boolean,
      isRequired?: boolean,
}

const TaskConfiguration = (props: ITaskConfigurationProps) => {
      return (
            <View style={(props.isRequired) ? [styles.container, {backgroundColor: '#f25e5e'}] : styles.container}>

                  { props.isInputForm && <TaskInputContainer title={props.title} /> }


            </View>
      );
}

export default TaskConfiguration;

const TaskScreen = (props: ITaskScreenProps) => {
      return (
            <View style={styles.container}>
                  <SectionTitle title={'Task Settings'} />
                  <ScrollView contentContainerStyle={styles.configurations}>
                        <TaskConfiguration title={"What you need to do?"} isInputForm={true} isRequired={true} />
                        <TaskConfiguration title={"Description"} isInputForm={true} />
                        <TaskConfiguration title={"Deadline"} />
                        <TaskConfiguration title={"Priority"} />
                  </ScrollView>
                  <Button isDone={true} navigation={props.navigation} />
            </View>
      )
}

TaskInput组件带有一个道具title，它将在屏幕上的两个位置。一个组件将被称为“输入主要任务”，另一组件将被称为“描述”。但是此组件将接受不同的状态，例如currentMainTextInput和currentDescriptionTextInput。这是我可重用的组件TextInput的想法，但是我无法做我想做的事情，因为如果我在一个输入中设置了类型-其他输入将与第一个输入一起重新呈现（它们都是一个表示性组件）。

我想在我的应用程序的任何位置使用此哑巴组件。我不想创建一个新的相同组件并重复代码，该怎么做？（P.S.我当时在考虑“ redux或class / hook”，但是我应该使用...）

一种形式，但状态不同

0 个答案: