小编Jes*_*sus的帖子

尝试将 svg 作为 React 组件下载时出现以下错误。

语法错误：未知：默认情况下不支持命名空间标记。React 的 JSX 不支持命名空间标签。您可以打开“throwIfNamespace”标志来绕过此警告。

import React from "react";
import { ReactComponent as LO } from "../a/Logo.svg"
import { NavLink } from "react-router-dom";

const Logo = () => (
  <>
    <NavLink to={"/"}>
     <LO width={"40px"} height={"40px"} />
    </NavLink>
  </>
);

export default Logo;

是什么原因 ？

我有store.js文件

import { createStore, combineReducers } from "redux";
import reducerADD from "../reducer/reducerADD"

export const store = createStore(combineReducers({ reducerADD}));

当我更改格式时store.tsx出现错误：

No overload matches this call.
  Overload 1 of 2, '(reducers: ReducersMapObject<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, any>): Reducer<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, AnyAction>', gave the following error.
    Type '(state: never[] | undefined, action: action) => { lastName: string; firstName: string; password: string; …

这是我的代码

模式

gql`
  type Query {
    user: X!
  }
  type User {
    name: String!
  }
  type Time {
    age: Int!
  }
  union X = User | Time
`;

解析器

{
  X: {
    __resolveType: obj => {
      if (obj.name) return { name: "Amasia" };
      if (obj.age) return { age: 70 };
      return null;
    }
  },
  Query: {
    user: () => {
      return {
        name: "Amasia"
      };
    }
  }
}

要求

query {
user{
  ... on User {
    name
  }
  ... on …

我知道两种继承函数构造函数的方法。

选项 1 Object.create

function x(x, y) {
  this.x = x;
  this.y = y;
}

x.prototype.XDD = function() {};


function y(c, r) {
  x.call(this, 1, 2);
  this.r = r;
  this.c = c;
}

y.prototype = Object.create(x.prototype);
y.prototype.YDD = function() {};
y.prototype.XDD = function() {};
y.prototype.constructor  = y;

var rect = new y(1, 2);

选项 2 Object.setPrototypeOf()

function x(x, y) {
  this.x = x;
  this.y = y;
}

x.prototype.XDD = function() {};

function y(c, r) {
  x.call(this, 1, 2);
  this.r = …

突变

Mutation: {
  signUp: (_, { res }) => {
    try {
      res.cookie("jwt", "token", {
        httpOnly: true
      });
      return "Amasia";
    } catch (error) {
      return "error";
    }
  };
}

Apollo-clenet-反应

const [addTodo, { loading, error, data }] = useMutation(gql);

  const [formSignUp, setFormSignUp] = useState({
    lastName: '',
    firstName: '',
    password: '',
    email: '',
  });

  const change = e => {
    const { value, name } = e.target;
    setFormSignUp({ ...formSignUp, [name]: value });
  };

当我从反应中提出请求时。这是我从服务器得到的答案。

1)数据 {"data": {"signUp": "Amasia"}}

2)网络 …

我想使用textarea和react组件来创建一个表单。react组件会写在文本区里面，组件结构会显示在底部。我想把这个字符串保存在数据库中，以便以后检索并以某种方式将其转换为 jsx 页面。基本上，我说的一切都非常相似markdown，但我只想使用反应组件。如果流行的包是为此设计的？

例子

const Prism = ({ language }) => {
  return <div style={{ color: "#45E700" }}>{language}</div>;
};

export default function App() {
  const [text, setText] = useState(`<Prism language={"javascript"}/>`);
  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
     <Render src={text} />
    </div>
  );
}

这可能编码

架构

import { gql } from 'apollo-server-express';

export default gql`
  extend type Mutation {
    signUp(
      lastName: String!
    ): String!
  }
`;

解析器

{
  Query: {},
  Mutation: {
    signUp: async (
      _,
      { lastName}
    ) => {
      try {
        console.log(lastName)
        return 'ok';    
      } catch (error) {
        return 'error';
      }
    },
  },
};

要求

mutation($lastName:String){
  signUp(lastName:$lastName)
}

查询验证

{"lastName":"Darjo" }

我无法理解，但我收到错误

"类型为 \"String\" 的变量 \"$lastName\" 用于期望类型为 \"String!\" 的位置。",

但是当我移除标志时！ lastName: String一切正常。

我就是无法理解。是什么原因 ？。