为什么这个孩子不响应组件渲染？
[英]Why isn't this child react component rendering?
问题描述
I'm trying to get a child component to render in react and it's not rendering. 
我试图让一个子组件在反应中呈现，它不是呈现。 If I write the actual JSX composed in the child component in the parent, it renders, Why is that? 如果我在父级的子级组件中编写了实际的JSX，它会渲染，为什么呢？ The examples in the documentation show that this is possible, I don't know what I'm doing wrong. 文档中的示例表明这是可能的，我不知道自己在做什么错。
Example here: https://jsfiddle.net/69z2wepo/309969/ 此处的示例： https : //jsfiddle.net/69z2wepo/309969/
class App extends React.Component { render() { return( <Rectangle /> ); } } function Rectangle(){ return ( <div className="Rectangle"> <square /> </div> ); } function square(){ return ( <div className="square"> </div> ); } ReactDOM.render( <App />, document.getElementById('container') );
.Rectangle { position: relative; background-color: #222; height: 760px; width: 40px; } .square { position: absolute; background-color: green; top: 0px; left: 0px; height: 20px; width: 20px; }
<!Doctype> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> </head> <body> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> </body>
The end result should show a dark grey rectangle, with a 20x20 pixel green square affixed to the top left of it. 最终结果应显示一个深灰色的矩形，并在其左上方粘贴一个20x20像素的绿色正方形。
3 个解决方案
解决方案1
1 已采纳 2018-09-29 22:30:55
Name your components starting with a capital letter. 以大写字母命名您的组件。
function Square(){
return (
<div className="square">
</div>
);
}
function Rectangle(){
return (
<div className="Rectangle">
<Square />
</div>
);
}
解决方案2
0 2018-09-29 22:34:54
If you are trying to render the child component "square" then change the name square to Square and also change the function name square to Square. 如果要渲染子组件“ square”，则将名称square更改为Square并将功能名称square更改为Square。 Component name always needs to start with Capital Letter. 组件名称始终需要以大写字母开头。 Otherwise it will not render. 否则它将无法渲染。
解决方案3
0 2018-09-29 22:37:38
There are 2 issues here: 这里有两个问题：
- Components name should start with capital letters. 组件名称应以大写字母开头。
- In your fiddle you are using the
logoutBoxclassNamebut you wrote a.squarecss class.在您的小提琴中，您使用的是logoutBoxclassName但是您编写了一个.squarecss类。
class App extends React.Component { render() { return ( <Rectangle /> ); } } function Rectangle() { return ( <div className="Rectangle"> <Square /> </div> ); } function Square() { return ( <div className="square"> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
.Rectangle { position: relative; background-color: #222; height: 760px; width: 40px; } .square { position: absolute; background-color: green; top: 0px; left: 0px; height: 20px; width: 20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.