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

【问题标题】：Can I write Component inside Component in React?我可以在 React 中的 Component 中编写 Component 吗？
【发布时间】：2018-01-31 13:44:20
【问题描述】：

我遇到过很多关于如何进行Component 嵌套的消息来源。但是，每当我尝试在另一个 Component 中创建 Component 时，我的代码都会失败。

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

【问题讨论】：

您这样做可能想达到什么目的？您可以将它们分别写在同一个文件中，并在渲染方面按照您想要的方式使用它。
这不是有效的 javascript
@Axnyff 是 React.js 代码。
@RishikeshDhokare 实际上，当我们不使用 redux 并且想要编写复杂的代码时，在某些情况下我想在组件中使用组件。我从一些人那里听说这是可能的。但是，我不知道如何。
在这里试试：babeljs.io/repl，你会得到一个语法错误。这不是有效的 javascript，即使您编译了 jsx

标签： reactjs

【解决方案1】：

你不能那样做。您可以在同一个文件（不是同一个组件）上执行此操作

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

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

【讨论】：

1.你不能在同一个文件中有 2 个默认导出 2. 你需要在 ABC 之前定义 DEF
你是对的。我复制/粘贴了代码并没有改变它。

【解决方案2】：

你不能在另一个类中定义类，我不明白你为什么想要。

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

你可以这样做：

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

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

我已经使用扩展运算符将道具从有状态组件传递到功能组件，但您可能应该根据需要传递单个道具..

【讨论】：

至于为什么要这样做，假设子组件（MyFunctionalComponent）需要使用来自 MyStatefulComponent 的函数，而您不想总是将其作为道具传递

【解决方案3】：

组件嵌套意味着在其他组件中渲染反应组件。喜欢

<ParentComponent property={value}>
    <div>
        <ChildComponent />
        ...
    </div>
</ParentComponent>

【讨论】：

【解决方案4】：

这就是你实现目标的方法。

class ABC extends React.Component {

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

【讨论】：

你的回答是对的。但是，我打勾的答案在概念上更正确。

【解决方案5】：

你可以将组件定义为其他组件的静态属性

class Test extends Component {
 static SubTest=props=><div>SubTet</div>
 render(){
  return(
   <div>Test component</div>
   )
 }

<Test />
<test.SubTest />

【讨论】：

点评来源：您好，请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢