Question

我是React.js的新手，我正在尝试用它来建立自己的网站。我试图做的是将子组件嵌套在父组件中;父组件应该在主页面中呈现，子组件嵌套在其中。我已经在下面列举了我的尝试。

到目前为止，我的方法是

在＆＃39; childComponent.js＆＃39;
将该子组件导出为＆＃39; childComponent＆＃39;
导入＆＃39; childComponent＆＃39;到父组件
渲染＆＃39; childComponent＆＃39;在该父组件
将该父组件导出为＆＃39; parentComponent＆＃39;
导入＆＃39; parentComponent＆＃39;到＆＃39; index.js＆＃39;
渲染＆＃39; parentComponent＆＃39; in＆＃39; index.js＆＃39;

这里的问题是＆＃39; childComponent＆＃39;在我的React应用程序中永远不可见。我在这里采取了错误的做法吗？是否有一种我不理解的基本机制？

提前致谢!!

-

子组件（childComponent.js）：

import React, { Component } from 'react';
import './childComponent.css';

class childComponent extends Component {
  render() {
    return (
      <div className="child-component">
        <span>Hello World</span>
      </div>
    );
  }
}

export default childComponent

childComponent.css：

.child-component {
  width: 100vw;
  height: 300pt;
  background-color: #F4F4F4;
  display: flex block;
  justify-content: center;
  align-items: center;
  align-content: center;
}

父组件（parentComponent.js）：

import React, { Component } from 'react';
import childComponent from './childComponent.js';
import './parentComponent.css';

class parentComponent extends Component {
  render() {
    return (
      <div className="parent-component">
        <childComponent></childComponent>
      </div>
    );
  }
}

export default parentComponent;

主页面（index.js）：

import React from 'react';
import ReactDOM from 'react-dom';
import parentComponent from './parentComponent';
import './index.css';

ReactDOM.render(
  <parentComponent/>,
  document.getElementById('root')
);

Answer 1

您的第一个也许唯一的问题是反应组件必须以大写字母开头。

大写类型表示JSX标记指的是React组件。这些标记被编译成对命名变量的直接引用，因此如果使用JSX表达式，则Foo必须在范围内。

来自：https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

建议删除CSS并将所有内容移动到一个文件中的注释也是调试和React应用程序早期阶段的好建议。

试图嵌套React组件

1 个答案: