Question

我有这个组件：

import React from "react";
import Snackbar from "@material-ui/core/Snackbar";

const GlobalMessage = function(props) {
  return (
    <Snackbar
      anchorOrigin={{
        vertical: "top",
        horizontal: "center"
      }}
      open="{props.error}"
      autoHideDuration={3000}
      ContentProps={{
        "aria-describedby": "message-id"
      }}
      message={<span id="message-id">{props.error}</span>}
    />
  );
};

export default GlobalMessage;

要将字符串从另一个组件发送到该功能组件，我有以下代码，但是它们都不起作用：

GlobalMessage({error:"this.props.error"})
GlobalMessage.bind(null,{error:"this.props.error"})
GlobalMessage("This is an error!")

如何将字符串或数据发送到组件函数？而且，我不想这样使用它：

<GlobalMessage error={this.props.error} />

Answer 1

在React中，反应性的核心是state和props。由于要使用功能组件，因此您只能使用props。

根据我的理解，您希望从其他不同的组件发送此功能组件“字符串”，因此我想您想使用单个组件，并在每次传递新字符串时将其重新呈现。没有简单的解决方案来实现这一目标。如果您只想使用单个GlobalMessage组件，则不建议使用GlobalMessage("some string")，因为它将在每次调用时创建一个新组件。

我想到的最简单的解决方案是，不使用像Redux或Mobx这样的可确保反应性的数据存储和库，而是在某种程度上采用表示性和容器性组件（read more here）。

您可以创建一个顶级的有状态类组件来保存您的字符串，将其命名为AppManager，然后从那里显示您想要的任何组件。

此类组件的示例：

class AppManager extends React.Component {
 state = {
   message: ""
 }
 setMessage = (message) => {
  this.setState({message});
 }
 render() {
  return (
   <React.Fragment>
    <App 
      setMessage={this.setMessage}
    >
    <GlobalMessage error={this.state.message} >
   </React.Fragment>
  )
 }
}

然后可以将道具中的setMessage函数传递给其他组件。在App组件中，您可以调用this.props.setMessage(message)将消息发送到GlobalMessage。

更优雅，更可扩展的解决方案涉及使用cartiv，redux或mobx之类的库，但我建议您查找它们。

希望有帮助！

React：如何将字符串发送到功能组件

1 个答案: