如何通过props将html模板传递给react组件？

Question

我有一个弹出窗口反应组件。我想通过道具将模板传递给组件。

以下是我弹出窗口的示例

popup = (
   <div>
     <Popup text='This is a popup'
            popupEl={ popupEl }
     />
   </div>
);

如果popupElements值是自己的按钮或复选框列表，则弹出组件有效。但我想传递一个完整的模板。不幸的是，当我尝试这样做时，popupElements prop被视为未定义。

这是我想传递的模板的一个非常基本的例子。我在这里找不到什么东西？

popupEl = (
   <div>
      <div>
        <h1> hi </h1>
      </div>
      <div>
        <button>CLOSE</button>
      </div>
   </div>
);

Answer 1

popupEl应该是一个返回JSX的函数，

popupEl = () =>
   <div>
      <div>
        <h1> hi </h1>
      </div>
      <div>
        <button>CLOSE</button>
      </div>
   </div>
);