Question

我正在尝试让子组件在react中进行渲染，但未渲染。如果我在父级的子级组件中编写了实际的JSX，它会渲染，为什么呢？文档中的示例表明这是可能的，我不知道自己在做什么错。

此处的示例：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>

最终结果应显示为深灰色矩形，并在其左上方粘贴一个20x20像素的绿色正方形。

Answer 1

以大写字母开头的组件命名。

function Square(){
    return (
        <div className="square">
       </div>
   );
}

function Rectangle(){
    return (
        <div className="Rectangle">
          <Square />
        </div>
   );
}

Answer 2

如果您尝试呈现子组件“ square”，则将名称square更改为Square，并将功能名称square更改为Square。组件名称始终需要以大写字母开头。否则它将无法渲染。

Answer 3

这里有2个问题：

组件名称应以大写字母开头。
在摆弄中，您使用的是logoutBox className，但是您编写了一个.square CSS类。

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" />

为什么这个孩子不响应组件渲染？

3 个答案: