将变量直接注入到从React-Apollo <突变/>组件传递的函数中，而不是作为道具

在React-Apollo中，突变（Mutation）组件用于执行GraphQL突变操作。通常情况下，我们将变量作为道具（props）传递给突变组件，然后在组件内部使用这些变量。

然而，有时候我们希望将变量直接注入到从React-Apollo突变组件传递的函数中，而不是作为道具。这可以通过使用高阶组件（Higher-Order Component，HOC）来实现。

下面是一个示例代码，演示了如何将变量直接注入到突变组件传递的函数中：

import { graphql } from 'react-apollo';
import { gql } from 'apollo-boost';

// 定义GraphQL突变操作
const mutation = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, name: $name) {
      id
      name
    }
  }
`;

// 创建高阶组件
const withMutation = graphql(mutation, {
  name: 'updateUserMutation',
});

// 定义一个React组件
const MyComponent = ({ updateUserMutation }) => {
  const handleUpdateUser = async (id, name) => {
    try {
      // 直接调用注入的突变函数
      const response = await updateUserMutation({
        variables: { id, name },
      });
      console.log(response.data.updateUser);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={() => handleUpdateUser('123', 'John')}>
        Update User
      </button>
    </div>
  );
};

// 使用高阶组件包装React组件
const MyComponentWithMutation = withMutation(MyComponent);

export default MyComponentWithMutation;

在上面的代码中，我们首先定义了一个GraphQL突变操作（mutation）。然后，我们使用graphql函数创建了一个高阶组件，并将突变操作作为参数传递给它。通过name属性，我们为注入的突变函数指定了一个名称（updateUserMutation）。

接下来，我们定义了一个React组件MyComponent，它接收updateUserMutation作为道具。在handleUpdateUser函数中，我们直接调用了注入的突变函数updateUserMutation，并传递了变量id和name。

最后，我们使用高阶组件withMutation包装了MyComponent，并导出了包装后的组件MyComponentWithMutation。

这样，我们就可以在React组件中直接注入变量到突变函数中，而不需要将变量作为道具传递。这种方式可以简化代码，并提高开发效率。

推荐的腾讯云相关产品：腾讯云函数（Serverless Cloud Function），详情请参考腾讯云函数产品介绍。腾讯云函数是一种事件驱动的无服务器计算服务，可以帮助开发者更轻松地构建和运行云端应用程序。