React native 一种形式，但不同的状态

我现在正从其他技术转向React Native，我遇到了一个问题。我有一个表示组件，它是

const TaskInput=（props:ITaskInputProps）=>{
返回(
{props.title}
)
}

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;

从“React”导入React；
从“react native”导入{View}；
从“./styles”导入样式；
从“../task input”导入TaskInputContainer；
接口ITaskConfigurationProps{
标题：字符串，
isInputForm？：布尔，
isRequired？：布尔值，
}
const TaskConfiguration=（props:ITaskConfigurationProps）=>{
返回(
{props.isInputForm&&}
);
}
导出默认任务配置；

const TaskScreen=（道具：ITaskScreenProps）=>{
返回(
)
}

TaskInput

组件采用一个道具，即

title

，它将位于我的屏幕上的两个位置。一个组件称为“输入主任务”，另一个组件称为“说明”。但此组件将接受不同的状态，如

currentMainTextInput

和

CurrentDescriptionOutput

。这是我关于可重用组件TextInput的想法，但我不能做我想做的事情，因为如果我在一个输入中设置类型，其他输入将使用第一个输入重新呈现（它们都是一个表示组件）

---

我想在我的应用程序的任何地方使用这个哑组件。我不想创建一个新的相同的组件和重复的代码，我该怎么做？（另外，我在考虑“redux或class/hooks”，但我应该使用什么…

Hello@Redial，是的，你可以这样做。你能给我看一下整个TaskInput组件代码吗？您可以使用

React Hooks

作为

FunctionalComponent

执行此操作。我只需要查看整个组件就可以为您提供解决方案：）您好，感谢您对我的文本进行改进：）这是整个组件代码，只不过是“导出默认值…”您好，请显示家长component@IanVasco，没问题，还有一件事。什么是“但此组件将接受不同的状态，如currentMainTextInput和CurrentDescriptionOutput”。我不明白

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