Question

I have a unknown list of react components to render.

// this is a react component
var DefaultModule = require('./DefaultModule.js');

<DefaultModule/> <--- this will output something because the name is exactly the class name inside DefaultModule.js

but if I do

// this is a react component
var sssss = require('./DefaultModule.js');

<sssss/> <--- this will not work

so is there a way I can take a list of component names and render them accordingly? Thanks.

p.s: the react component looks like this

import React, {PropTypes, Component} from 'react';

class TestComponent extends Component {

  render() {
    return (
      <div>
     1123123123123123 hahaha small test
      </div>
    );
  }
}

export default TestComponent;

Answer 1

I just figured out the answer from a discussion thread...

Yes I can do that but the react component must start in capital letter. so Sssss will work sssss will now.

https://github.com/facebook/react/issues/3365

The key is to use a capitalized variable name (Component) otherwise React will treat it as a built-in DOM element.

React components rendering with variable names

1 个答案: