你可以在 React 组件的返回函数中设置外部 HTML 吗？

Question

MailchimpSubscribe 组件的默认行为会在用户注册时显示状态警报。我想将此状态警报移到它在 DOM 中的位置之外，以便它显示在页面顶部。

我的代码如下所示：

import MailchimpSubscribe from "react-mailchimp-subscribe"
import SimpleForm from './SimpleForm.js'

function Info() {
 return (
  <div className="canary">
   <MailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} 
    render={({subscribe, status, message}) => <SimpleForm
     status={status}
     message={message}
     className="form"
     style={{}}
     onSubmitted={formData => subscribe(formData)}
    />
   }/>
  </div>
 );
}

export default Info;

为了更改默认按钮文本，我创建了自己的SimpleForm.js 组件：

import React from "react";

// a basic form
const SimpleForm = ({ status, message, className, style, onSubmitted }) => {
  let input;
  const submit = () =>
    input &&
    input.value.indexOf("@") > -1 &&
    onSubmitted({
      EMAIL: input.value
    });

  return (
    <div className={className} style={style}>
      {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
      {status === "error" && (
        <div
          style={{ color: "red" }}
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      {status === "success" && (
        <div
          style={{ color: "green" }}
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      <input
        ref={node => (input = node)}
        type="email"
        placeholder="Your email"
      />
      <button onClick={submit}>Subscribe</button>
    </div>
  );
};

export default SimpleForm;

如何修改这个返回函数，以便将dangerouslySetInnerHTML={{ __html: message }} 部分设置为<div className="canary">？

Answer 1

From what I see in component definition you can pass render props

MailchimpSubscribe.defaultProps = {
  render: ({ subscribe, status, message }) => (
    <SimpleForm
      status={status}
      message={message}
      onSubmitted={formData => subscribe(formData)}
    />
  )
};

使用SimpleForm 并包含特定的className style

<MailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} 
  render={({subscribe, status, message}) => <SimpleForm
      status={status}
      message={message}
      className="form"
      style={{}}
      onSubmitted={formData => subscribe(formData)}
    />
}/>

如果您需要更多自定义，您可以根据 SimpleForm 内部的内容创建自己的组件

Answer 2

这就是我对问题的理解?：

问题

如何在Component B 中呈现作为道具传递给Component A 的数据？

• MailchimpSubscribe 将 message 保存在其内部状态中，并将其作为道具传递给其 render 函数的结果

回答

React 旨在仅以单向数据流的形式将数据从父母传递给孩子， 所以作为 props 传递给MailchimpSubscribe 的数据不能直接在另一个不是其子组件的组件中呈现?

我能想到的最好的规避方法是利用Context API 在MailchimpSubscribe 内部呈现的SimpleForm 和应用其他地方呈现的DisplayMessage 之间创建共享状态。

• 在新文件中SharedState.js
  • 创建SharedContext 以允许组件访问上下文
  • 创建SharedProvider，它是一个父级，它将使上下文对其所有子级都可用
• 在SimpleForm
  • 阅读SharedContext
  • 设置将status 和message 值推送到上下文的效果。每次这些值发生变化时都会调用此效果。
  • 当status 不为空时返回null，因为您想在别处呈现message 并隐藏表单。
• 在DisplayMessage
  • 阅读SharedContext
  • 使用SharedContext 中的status 和message 呈现您的消息

演示

我把this CodeSandbox 放在一起说明了这个策略。

参考文献

• useContext 的反应文档
• Context 的反应文档

希望对您有所帮助！让我知道您是否想进一步澄清任何事情?