试图嵌套反应元件
试图嵌套反应元件
提问于 2017-01-15 20:46:54
我是React.js的新手，正在尝试用它来建立自己的网站。我要做的是在父组件中嵌套一个子组件；父组件应该在主页面中呈现，其子组件嵌套在主页面中。下面我列举了一个我的尝试的例子。
到目前为止，我的方法是
- 在“childComponent.js”中创建子组件
- 将子组件导出为“childComponent”
- 将“childComponent”导入父组件
- 在父组件中呈现“childComponent”
- 将父组件导出为“parentComponent”
- 将“parentComponent”导入“index.js”
- 在“parentComponent”中呈现“index.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 childComponentchildComponent.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')
);回答 1
Stack Overflow用户
发布于 2017-01-15 21:42:44
你的第一个问题，也许也是唯一的问题是，反应组件必须以大写字母开头。
大写类型表示JSX标记引用的是一个React组件。这些标记被编译成对命名变量的直接引用，所以如果使用JSX表达式，Foo必须在作用域内。
来自：https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components
建议删除CSS并将所有内容移动到一个文件中的评论对于调试和反应应用程序的早期阶段也是一个很好的建议。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41666131
复制相关文章
相似问题
腾讯云开发者
