Question

我使用上下文api做出反应，将数据传递给子组件。我遇到的问题是我需要使用从上下文传递的数据作为变量来运行graphql查询。我创建了一个HOC，并且成功地能够从render函数中的props中访问数据，但是我无法访问graphql查询中的值。

context.js

import React, { Component } from 'react';

export const Context = React.createContext();

export const { Consumer, Provider } = Context;

export const WithContext = (Component) => {
    return (props) => (
        <Consumer>
             {value =>  <Component {...props} data={value} />}
        </Consumer>
    )
}

Component.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { GetMerchantLocations, GetMerchant } from '../../data/queries';
import { Consumer, WithContext } from './context';


class Locations extends Component {

    render(){

        console.log(this.props.data.data);

        return (

            <div className="locations-container">
            <div className="flex grid-header vertical-center">
                <div className="item">
                    <h3>Manage Locations</h3>
                </div>
                <div className="item">
                    <div className="btn">Create Location</div>
                </div>
            </div>

            <div className="table-row table-header grid" style={rowStyle}>
                <div>Location</div>
                <div>Manager</div>
                <div></div>
                <div></div>
            </div>
            <div className="table-body">
            </div>
        </div>
        );
    }
}

export default graphql(GetMerchantLocations, { 
    options: (props) => ({
        variables: {
            id: this.props.data.data.id
        },
    })}
)(WithContext(Locations));

Answer 1

导出HOC时使用的上下文错误。

您说的是

    <div v-html='message'></div>
    <div v-html='message2'></div>
    <div v-html='message3'></div>
    <div v-html='computed3'></div>

data: () => ({
    message: "Hello \"World\"",
    message2: `Hello \"World\"`,
    message3: 'Hello \\"World\\"', // this one is your property.
  }),

computed: { 
 computed3() {
      return this.message3.replace(/\\"/g, '"');
    }
}

在选项中，您可以访问选项范围属性： props.data ...

React获取graphql查询的上下文值

1 个答案: