javascript - ReactJs:动态组件加载传递属性

Question

我有一个ReactJS组件库，如下代码:

components.js

class Comp1 extends Component {

    render () {
        return (
            <div>Component 1 Text: {this.props.text}</div>
        );
    }
}

class Comp2 extends Component {

    render () {
        return (
            <div>Component 2 Text: {this.props.text}</div>
        );
    }

}

export components = {
    Comp1,
    Comp2
}

主要组件需要根据传递的属性选择要渲染的组件:

ma​​in.js

import { components } from './components';

class Main extends Component {

        getComponent = (name) =>  {
            return components[name];
        };

        render () {

            let comp = this.getComponent(this.props.componentName);

            return (
                <div>
                    <comp   <=== HOW TO CALL THE GIVEN COMPONENT PASSING ITS PROPERTY
                        text={'This is component' + this.props.componentName }
                    />
                </div>
            );
        }
    }


class App extends Component {
        render () {

            return (
                <div>
                    <Main componentName='Comp1' /> // Or 'Comp2'
                </div>
            );
        }
    }
}

我需要在主要代码中呈现组件并传递其属性，但我无法使其工作(请参阅代码注释)。一个简单的 {comp} 呈现组件，但我需要能够相应地传递它的属性。

我尝试过的:

{comp text={'This is component' + this.props.componentName}}
<comp text={'This is component' + this.props.componentName}/>

它们都不起作用。

Answer 1

您的组件名称需要以大写字符开头。所以它应该看起来像

import { components } from './components';

class Main extends Component {

        getComponent = (name) =>  {
            return components[name];
        };

        render () {

            let Comp = this.getComponent(this.props.componentName);

            return (
                <div>
                    <Comp text={'This is component' + this.props.componentName }
                    />
                </div>
            );
        }
    }


class App extends Component {
        render () {

            return (
                <div>
                    <Main componentName='Comp1' /> // Or 'Comp2'
                </div>
            );
        }
    }
}