將Jsx組件作為props傳遞給另一個jsx組件

Question

如果我將jsx組件（A）作為prop傳遞給另一個組件（B），如下所示：

import A from "A.jsx";
import B from "B.jsx";
...
class MyClass extends React{
...
  render(){
    return <B customContent={A} />
  };
}

當組件B在React生命周期中更新時，A也會更新嗎？

Answer 1

在React中渲染組件時，它的所有子組件也將被渲染。

在您將組件A作為屬性組件傳遞給B的情況下， A將作為常規對象傳遞給組件B ，並且不會呈現。

例如：如果你傳遞函數而不是組件A，它將不會被執行，直到你從組件B調用它。

如果你需要動態地在另一個內部渲染一個組件，你應該在props對象上使用children屬性讓我告訴你：

在我的班級

  class MyClass extends React{
    ...
      render(){
        return <B > 

                 <A />

               </B>
      };
    }

在組件B

您可以執行以下操作：

 class B extends Component{
    ...
      render(){
        return
                <React.Fragment> 

                 {this.props.children}

               </React.Fragment>
      };
    }