重用具有不同方法调用的反应组件答案

【问题标题】：Reuse a react component with different method calls重用具有不同方法调用的反应组件
【发布时间】：2018-10-30 18:38:39
【问题描述】：

我想用一个简单的表单创建一个组件，比如说有 4 个输入字段和一个提交按钮。当用户点击提交时，将发出一个 POST 请求。但是后来我想重用相同的组件来发出 PUT 请求。我怎样才能做到这一点？

【问题讨论】：

标签： reactjs components

【解决方案1】：

将一个函数从父组件传递给您的子组件（表单）：

https://codesandbox.io/s/4x3zjwxwkw

const App = () => (
  <div>
    <CreateRecipe />
    <UpdateRecipe />
  </div>
);

class CreateRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();
    console.log("Do POST recipe");
  }
  render() {
    return (
      <div>
        <MyForm title="POST Recipe" onSubmit={this.onSubmit} />
      </div>
    );
  }
}

class UpdateRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();
    console.log("Do GET recipe");
  }
  render() {
    return (
      <div>
        <MyForm title="GET Recipe" onSubmit={this.onSubmit} />
      </div>
    );
  }
}

const MyForm = ({ title, onSubmit }) => {
  return (
    <div>
      <h2>{title}</h2>
      <form onSubmit={onSubmit}>
        <input type="text" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

编辑：根据评论，您完全可以将POST 和GET 提交函数分开，但这有点重复逻辑。更好的办法是让<App /> 组件拥有两个提交函数，并将它们分别传递给<UpdateRecipe /> 和<PostRecipe />，甚至可能还有标题！我会让你随心所欲地编写它，但希望这能向你展示 React 的灵活性。

【讨论】：

是否可以创建三个单独的组件，一个使用 post 方法，另一个使用 update 方法，最后一个使用表单本身？
@aye 是的，当然。刚刚更新了答案和沙盒链接。如果你绝对不想在同一个组件中拥有POST 和GET 函数，你可以复制CreateRecipe 和UpdateRecipe 中的逻辑。

【解决方案2】：

您可以将方法作为道具传递给组件 - 这样您就可以在组件外部定义功能并让它在组件范围内执行它。

这方面的一个例子是将 onPress 事件传递给 Button，或将 onClick 事件传递给任何其他组件。

【讨论】：

【解决方案3】：

您可以将方法作为prop 传递给组件，然后在提交函数中引用道具，如下所示：

submit = () => {
     var data = {
        method: this.props.method,
        ...
     };

   fetch('/url/', data);
}

【讨论】：