ReactJS 将组件作为 var 传递（在 ecma6 中）

Posted 2023-02-23

【中文标题】ReactJS 将组件作为 var 传递（在 ecma6 中）

【英文标题】：ReactJS pass component as var (in ecma6)

【发布时间】：2016-11-08 07:02:30

【问题描述】：

在一个 js 文件中我有一个组件：

import React from 'react';
export default class ImageGrid extends React.Component 
  render()
    return <div>ImageGrid1</div>
  

我想使用“var”从另一个组件渲染上述组件，但我不知道语法：

import React from 'react';
import ImageGrid from 'components/imageGrid';
class HomePage extends React.Component 
  render() 
    var div1=ImageGrid;
    return (div1); // what is the proper syntax?
  

【问题讨论】：

return <div1 />，但变量名应大写，即var Div1 = ImageGridjsfiddle.net/69z2wepo/48005

天哪！！！！它只需要一个大写字母

是的，因为在 JSX 中，小写组件被转换为 DOM 节点，而大写组件被转换为 React 元素。所以你应该使用var Div1

【参考方案1】：

这就是你想要的。

import React from 'react';
import ImageGrid from 'components/imageGrid';

class HomePage extends React.Component 
  render() 
    var SomeComponent = ImageGrid;

    return <SomeComponent />
  

【讨论】：

如pawel所说：你应该将变量名大写，即var Div1 = ImageGrid