Question

我正在开展一个项目，在这个项目中，潜在客户需要收到一封他们感兴趣的房产的电子邮件。有一个顶级组件可以获取房产信息和潜在客户的联系信息。数据库并传递给它的孩子。有两个组件共享相同的格式化信息的过程，然后调用发送电子邮件的电子邮件功能。一个组件的示例如下所示：

import sendEmail from 'actions/sendEmail'

class PropertyDetail extends React.Componet {
  state = {
    unit: undefined,
    prospect: undefined,
  };

  componentDidMount = () => {
    this.setState({
      unit: this.props.unit,
      prospect: this.props.prospect,
    });
  };

  sendEmail = ({ id, address, prospect }) => {
    // quite a bit more gets formatted and packaged up into this payload
    const payload = {
      id,
      address,
      prospectEmail: prospect.email,
    };

    emailFunction(payload);
  };

  handleEmail = () => {
    sendEmail(this.state);
  };

  render() {
    return (
      <div>
        <h1>{this.state.unit.address}</h1>
        <p>Send prospect an email about this property</p>
        <button onClick={this.handleEmail}>Send Email</button>
      </div>
    );
  }
}

，另一个组件看起来像这样

class UpdateShowing extends React.Component {
  state = {
    unit: undefined,
    prospect: undefined,
    showingTime: undefined,
  };

  componentDidMount = () => {
    this.setState({
      unit: this.props.unit,
      propsect: this.props.prospect,
      showingTime: this.props.showingTime,
    });
  };

  sendEmail = ({ id, address, prospectEmail }) => {
    // quite a bit more gets formatted and packaged up into this payload
    const payload = {
      id,
      address,
      prospectEmail,
    };

    emailFunction(payload);
  };

  handleUpdate = newTime => {
    // get the new date for the showing ...
    this.setState({
      showingTime: newTime,
    });

    // call a function to update the new showing in the DB
    updateShowingInDB(newTime);
    sendEmail(this.state);
  };

  render() {
    return (
      <div>
        <p>Modify the showing time</p>
        <DatePickerComponent />
        <button onClick={this.handleUpdate}>Update Showing</button>
      </div>
    );
  }
}

所以我看到了一些我喜欢不需要在每个组件中重复的共享功能。我还在学习（完成我的第一份工作），为什么不把它作为一个提高我技能的机会呢？所以我想在HOC / Render道具模式上做得更好，但我不确定这是否适合使用它。

我是否应该使用渲染道具创建一个组件（我宁愿使用此模式而不是HOC）？我甚至不确定那会是什么样子，我已经阅读了博客并观看了会谈，ala

<MouseMove render={(x, y) => <SomeComponent x={x} y={y} />} />

但是这种模式是否适用于我的情况，或者我最好定义一些lib函数来处理格式化电子邮件的有效负载，然后将该函数导入需要它的各种组件？

谢谢！

Answer 1

我认为使用带分支的渲染道具的提供者或组件更适合您

请参阅此文档：https://lucasmreis.github.io/blog/simple-react-patterns/#render-props

HOC / Render-Call Back或Library功能？

1 个答案: