Question

我有一个“ FormBuilder”组件，它遍历对象列表并根据列出的类型迭代输入。

我有一个“枚举”（我知道它不是一个枚举，因为它是Javascript），它将常量项与某个组件名称相关联，例如：

const InputTypes = Object.freeze({
    TEXT: 'TextInput',
    PASSWORD: 'PasswordInput',
    SUBMIT: 'SubmitInput',
    RESET: 'ResetInput',
    RADIO: 'RadioInput',
    CHECKBOX: 'CheckboxInput',
    BUTTON: 'ButtonInput',
    DATE: 'DateInput',
    EMAIL: 'EmailInput',
    NUMBER: 'NumberInput',
    TIMEINTERVAL: 'TimeIntervalInput'
});

每个字符串都是组件的名称。我不会全部列出它们，但这是一个示例“ TextInput”：

function TextInput(props) {
    return (
        <React.Fragment>
            <label>
                {props.name}:
                <input
                    type='text'
                    name={props.name.toLowerCase()}
                    value={props.value}
                    onChange = {props.handlers.handleChange}
                    {...props.attributes}
                />
            </label>
        </React.Fragment>
    );
}

export default TextInput;

现在，我有一个“ FormBuilder”组件，该组件遍历一堆包含type属性的对象：

render() {
    return <form id={this.props.id}>
        {

            this.props.inputFields.map(input=>{
                const propsWithKeyAndHandlers = Object.assign({
                    key:"" + this.props.task._id + input.props.name,
                    handlers:this.props.handlers,
                    value: this.props.task[input.props.name]}
                    ,input.props);
                return input.content?
                    React.createElement(input.type, propsWithKeyAndHandlers, input.content):
                    React.createElement(input.type, propsWithKeyAndHandlers);
            })
        }
    </form>

传递给该组件的数据类型的示例为：

        inputFields: [
            {props: {name:'name', },type:InputTypes.TEXT},
            {props: {name: 'description'}, type:InputTypes.TEXT},
            {props: {name:'deadline'},type:InputTypes.DATE},
            {props:{name:'startDate'},type:InputTypes.DATE},
            {props: {name:'external'},type:InputTypes.CHECKBOX},
            {props: {name:'estTime'},type:InputTypes.NUMBER}
        ],

这是我在运行此代码时在React开发人员控制台中看到的示例：

如您所见，它正在渲染正确的组件，但是它只是列出组件名称，而不是组件中的内容。

我如何获得React来渲染组件中所期望的内容？

Answer 1

您的InputTypes对象需要引用实际的组件，而不是字符串。例如

import TextInput from "./TextInput.jsx";
...

const InputTypes = Object.freeze({
    TEXT: TextInput,
    ...
});

您的“枚举”链接到恰好与您的组件具有相同名称的字符串，而不链接到实际的组件。默认情况下，您不能使用字符串来引用组件名称。字符串和具有相同名称的组件之间没有神奇的固有链接。

React正在将我的组件渲染为它们的名称，而不是其中的名称

1 个答案: