appendchild 一条 React Component 消息

Question

如何使用 appendChild 添加 React.js 组件作为函数，如下所示：

const message = (reactComponent) => {
  document.body.appendChild(reactComponent);
}

const MyReactComponent = () => (<span>Welcome back </span>);

message(<MyReactComponent />);  // Send a message to the user

Answer 1

你不会。您必须为此使用 html 元素。相反，您可以使用三元语法在渲染方法中显示或隐藏元素：

render()
  return (
     {
        this.state.someState?<div>something</div>:<div>something else</div>
     }
  )

您可以使用 onClick 事件来触发根据需要设置状态的方法。

您可以使用道具或状态。这个想法是根据需要设置道具或状态以附加、隐藏或切换您希望可见的元素。

Answer 2

这是我的解决方案：

首先，我使用 rc-notification 包创建了 message 函数，并将其放在名为 message.js:

的单独文件夹中

import Notification from "rc-notification";
import "rc-notification/assets/index.css";

let notification = null;
Notification.newInstance({}, (n) => notification = n);


function message(content) {
    notification.notice({ content });
}

export default message;

然后，我可以导入此函数并使用它向用户发送消息，如下所示：

import React from "react";
import message from "./PATH_TO_MESSAGE_FUNC";

const App = () => {
  const MyReactComponent = () => <span>Welcome back </span>;
  successMessage(<MyReactComponent />);  // trigger on page load in this case
  
  return (
    <div>My app</div>
  )
}

export default App;

appendchild 一条 React Component 消息

appendchild a React Component message

appendchild

reactjs