reactjs - 使用 react 钩子 useContext 渲染具有不同标题的组件

Question

请帮助解决问题...我在不同的 .js 文件中有 3 个组件。我能够将“标题”字段的值传递给子组件，但我无法使每个项目都以上下文文件中指定的唯一标题呈现。更多代码示例：

1. 下拉选择器，我在其中选择负责呈现哪个表单的值：

<MainView>
            <TextStyled>Select request type</TextStyled>
            <PickerContainer>
                <Picker
                    mode='dropdown'
                    ref={pickerRef}
                    enabled={true}
                    selectedValue={selectedForm}
                    onValueChange={(itemValue) =>
                        setSelectedForm(itemValue)
                    }>
                    <Picker.Item label="..." value={0} />
                    <Picker.Item label="Bug" value={1} />
                    <Picker.Item label="Bug from request" value={2} />
                    <Picker.Item label="Configuration" value={3} />
                    <Picker.Item label="Design/estimation" value={4} />
                    <Picker.Item label="Documenting" value={5} />
                    <Picker.Item label="Enhancement" value={6} />
                    <Picker.Item label="Feature" value={7} />
                    <Picker.Item label="Info Required" value={8} />
                    <Picker.Item label="Quality" value={9} />
                    <Picker.Item label="Task" value={10} />
                </Picker>
            </PickerContainer>
            <PickRenderLogic />
        </MainView>

2. ...以及选择表格的逻辑：

    function PickRenderLogic() {
        if (selectedForm === 1)
            return (
                <View>
                    <Text>TEST TEXT 1</Text>
                </View>
            )
        if (selectedForm === 2)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 2</Text>
                </View>
            )
        if (selectedForm === 3)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 3</Text>
                </View>
            )
        if (selectedForm === 4)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 4</Text>
                </View>
            )
        if (selectedForm === 5)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 5</Text>
                </View>
            )
        if (selectedForm === 6)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 6</Text>
                </View>
            )
        if (selectedForm === 7)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 7</Text>
                </View>
            )
        if (selectedForm === 8)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 8</Text>
                </View>
            )
        if (selectedForm === 9)
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 9</Text>
                </View>
            )
        if (selectedForm === 10)
            return (
                <TaskForm />
            )
        else {
            return (
                <View />
            )
        }
    }

3. 上下文文件：

import * as React from 'react';

const header = {
    header1: 'Test1',
    header2: 'Test2',
    header3: 'Test3'
}

export const FormBuildContext = React.createContext(header);

4. А 表单组件，按类型返回用于数据输入的字段列表：

const TaskForm = () => {
    const ListView = ({ field }) => {
        return (
            <View>{field}</View>
        )
    }

    return (
        <MainView>
            <FlatList
                data={[
                    { field: <TextField /> },
                    { field: <TextField /> },
                    { field: <TextField /> },
                ]}
                keyExtractor={(index) => index.toString()}
                renderItem={({ item }) => <ListView {...item} />}
            />
        </MainView>
    )
}

const MainView = styled.View`
    flex: 1;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
`;

const TextStyle = styled.Text`
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
`;

const StatusView = styled.View`
    background-color: red;
    flex: 1;
`;

export default TaskForm;

5. 我用来测试应用程序的文本输入字段：

const TextField = ({ }) => {

    const [textInputHeight, setTextInputHeight] = useState();
    const [ChangeText, setChangeText] = useState('');
    const header = useContext(FormBuildContext)

    return (
        <View>
            <Header>{header.header1}</Header>
            <TextInput
                multiline={true}
                onLayout={(event) => {
                    if (textInputHeight === 0) {
                        setTextInputHeight(event.nativeEvent.layout.height);
                    }
                }}
                onContentSizeChange={(event) => {
                    setTextInputHeight(event.nativeEvent.contentSize.height);
                }}
                onChangeText={(text) => setChangeText({ text })}
                style={{
                    borderWidth: 1,
                    height: (textInputHeight),
                    width: "auto",
                    borderColor: '#DCDCDC',
                    borderRadius: 4,
                    marginBottom: 20
                }}
            />
        </View>
    )
}

所以问题是......我怎样才能使列表中的每个组件都以唯一的标题呈现？

标签： reactjsreact-nativereact-hooks