javascript - React 将我的组件渲染为其名称，而不是其中的内容

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,
    ...
});

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