我可以在React中的Component中编写Component吗？

Question

我遇到过很多关于如何进行组件嵌套的消息来源.如何为父母和孩子设置常见道具.但是,当我尝试在React中编写组件内部组件时,我未能获得成功的结果.我是新的反应,可能这是不可能的或可能是我写错了代码.

  class ABC extends React.Component {

   class DEF extends React.Component {
       render() {
       return (
       <div>
           <h1>Hiiii</h1>
       </div>
       );
   }
 }

render() {
   return (
    <div>
      <DEF />
    </div>
    );
 }
 }  

Answer 1

你不能这样做.您可以在同一个文件(不是同一个组件)上执行此操作

class DEF extends Component {
  render() {
   return (
    <div>
      <h1>Hiiii</h1>
    </div>
    );
 }
}

export default class ABC extends Component {
  render() {
       return (
       <div>
           <DEF />
       </div>
       );
   }
}

Answer 2

您不能在另一个类中定义类，我也看不出您为什么要这么做。

在React中，您可以通过两种方式定义组件：有状态组件（类）或功能组件（函数）。有状态组件仅应在需要本地管理状态时使用。

您可以执行以下操作：

export default class MyStatefulComponent extends Component() {
  render() {
    return (
      <div><MyFunctionalComponent {...this.props} /></div>
    )
  }
}

function MyFunctionalComponent(props) {
  return <h1>I am functional</h1>
}

我已经使用了散布运算符将道具从有状态组件传递到功能组件，但是您可能应该根据需要传递各个道具。