尝试嵌套组件

Question

我是新来的。我试图用它来建立自己的网站。我想做的是在父组件中嵌套一个子组件；父组件应该在主页中呈现，子组件嵌套在主页中。下面我举了一个我尝试的例子。

到目前为止，我的方法是

1. 在“childComponent”中创建子组件。js'

这里的问题是“childComponent”在我的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

儿童部分。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

您的第一个问题（可能也是唯一的问题）是react组件必须以大写字母开头。

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

发件人：https://facebook.github.io/react/docs/jsx-in-depth.html#html-标签-vs.-react组件

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