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

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

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

Answer 3

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

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

您可以执行以下操作：

SELECT 
    t.id, t.value, t.branch_id, k.name 
FROM  
    tb_target as t 
LEFT JOIN 
    tb_keyindicator as k ON k.id = t.keyindicator_id 
WHERE 
    t.branch_id IN (241) 
    AND t.period >= '2017-09' 
    AND t.period < '2017-10' 
GROUP BY 
    branch_id;

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

Answer 4

这就是你如何实现你想要做的事情。

class ABC extends React.Component {

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

Answer 5

您只能将组件定义为其他组件的静态属性

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

<Test />
<test.SubTest />

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

5 个答案: