使用变量名渲染的 React 组件

Question

我有一个未知的要渲染的 React 组件列表。

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

<DefaultModule/> <--- 这将输出一些东西，因为名字是 DefaultModule.js

中的 class 名称

但如果我这样做

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

<sssss/> <--- 这行不通

有没有办法获取组件名称列表并相应地呈现它们？谢谢。

p.s：反应组件看起来像这样

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

class TestComponent extends Component {

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

export default TestComponent;

Answer 1

我刚从讨论帖中找到答案...

是的，我可以做到，但反应组件必须以大写字母开头。所以 Sssss 会起作用 sssss 现在会起作用。

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 组件

React components rendering with variable names

components

reactjs