如何从多个jsx文件中的组件创建一个复合React.js组件

How to create a composite React.js component from components in multiple jsx files

本文关键字：组件 js 一个 复合 创建 React jsx 文件      更新时间：2023-09-26

我正在学习如何使用React.js进行编程，但不知道如何从多个jsx文件中的组件创建一个复合React.js组件。我可以在一个jsx文件中使用单个组件来制作复合组件，但当我尝试在另一个jsx文件中使用一个js克斯文件中的组件时，该组件不会被识别（超出范围）。我不确定这是否重要，但我的IDE使用的是Visual Studio 2015，这两个jsx文件是Visual Studio项目的一部分。

像这样导入它们。

import React from 'react';
import DropDownMenu from './dropdown.menu';
import DropDownSelect from './dropdown.select';
let AppCtrlSty = {
  height: '100%',
  padding: '0 10px 0 0'
}
let DropDownSty = {
  border: 'solid 1px darkslategrey',
  height: 'calc(100% - 10px)',
  overflow: 'auto',
  paddingLeft: '0',
  width: '33%'
}
export default class AppCtrl extends React.Component {
   render() {
    return (
      <div id='AppCtrlSty' style={AppCtrlSty}>
        React 1.4 DropDown<br/><br/>
        <div id='menuColumns' className='FlexBox' style={{height: '100%'}}>
          <div id='DropDownMenu' style={DropDownSty}>
            <DropDownMenu />
          </div>
          <div id='DropDownSelect' style={DropDownSty}>
            <DropDownSelect />
          </div>
        </div>
      </div>
    );
  }
}

相关文章：