小编Ven*_*son的帖子

我被这个问题困住了，我正在使用 redux 来解决这个问题，并将问题分为 4 个部分。我想要实现的是使用另一个组件（也称为 PropEditor Form）内的 UI 动态映射组件道具。我在说什么，首先看到它尚未实现，但它只是我想要实现的原型。

如果您为我提供更好的解决方案来解决这个问题，我也将不胜感激。

我的做法：

我有一个名为的组件Heading.js，其中包含 2 个道具，hasFruit一个布尔类型和一个fruitName字符串类型。它可以是任何库中的组件，但让我们从简单开始。

源代码/组件/标题.js

import React from 'react';

export const Heading = (props) => {
    const { hasFruit, fruitName } = props;
    return <h1>Fruit name will show { hasFruit ? fruitName : 'Oh no!'}</h1>
};

A 部分：输入类型

我想将此组件道具显示为组件上的 UI PropEditor。所以，我必须为道具定义不同的 UI 组件。因此，我创建了 2 个输入类型组件。

src/editor/components/types/Boolean.js

import React from 'react';
import PropTypes from 'prop-types';


const propTypes = {
    /** object for the boolean …

我被这个问题困扰了 3 天。我在前端使用 React.jsaxios并希望将文件上传到服务器。有一个 API 端点，它是一个像这样的后端点。

POST- https://88.66.123.122:20000/b1s/v1/Attachments2

此端点基本上将文件上传到具有201状态的成功响应的服务器文件系统。当我使用桌面客户​​端测试端点时，响应成功正常Postman，此工具生成的代码片段是这样的。

但我想在浏览器 UI 中实现这件事。所以我为此使用 React.js。

此端点还需要请求标头中的授权 cookie 以确保用户通过身份验证。因此，在 UI 中，我创建了一个登录按钮，该按钮基本上将带有硬编码凭据的 post 请求发送到login端点，并为我提供带有会话 ID 的成功响应。

我将浏览器中的会话 ID 保存为上传文件的 cookie，但是当我随请求发送 cookie 时，我在浏览器中收到以下响应

Refused to set unsafe header "Cookie"

以及我用以下 JSON 返回的响应。

POST https://88.66.123.122:20000/b1s/v1/Attachments2 [401 (Unauthorized)]

{
   "error" : {
      "code" : 301,
      "message" : {
         "lang" : "en-us",
         "value" : "Invalid session."
      }
   }
}

我不知道我该如何解决这个问题？你可以看到GIF。

代码：

import React from 'react';
import axios from …

我正面临search. 它是前端搜索而不是远程搜索，我使用react.js它是因为它是问题中的一个要求并创建了一个名为App. 我的任务是根据类型值显示并突出显示匹配的部分。

我会很感激的。如果你为此提供了一个很好的解决方案。

让我告诉你整个场景。我将这个问题分为 3 个部分。

第 1 部分： 数据的形状是什么？

数据的形状是这样的：

源代码/数据.js：

export default [
    {
        id: 1,
        name: 'Wordpress',
        list: [
            {
                id: 1,
                name: 'Best Mobile App Builder',
                slug: '/'
            },
            {
                id: 2,
                name: 'Best Wordpress Themes',
                slug: '/'
            },
            {
                id: 3,
                name: 'Best Website Creator',
                slug: '/'
            },
            {
                id: 4,
                name: 'Best Wordpress Builder',
                slug: '/'
            }
        ]
    },
    {
        id: 2,
        name: 'SaaS',
        list: [
            { …

我被这个问题困了很多天。我正在使用Next.js并且有 3 页。

• 页面/index.js
• 页面/categories.js
• 页面/类别/[slug].js

的categories/[slug].js是使用Next.js提取方法名getServerSideProps即对每个请求运行，并用于在运行时构建动态页面。在categories/[slug].js该动态内容来自CMS从API端点的响应显示在网页上动态内容。动态内容只不过是一个包含 HTML<script />元素的字符串。

注意：要从 CMS 获取内容，我们必须发送一个POST请求，其中CMS包含用户名、密码和内容的页面 slug 等凭据。我正在使用axios库发送一个 post 请求，并且该方法在post.js文件中。

post.js：

import axios from 'axios';

const postCMS = async (slug) => {
    const url = `${process.env.CMS_API_URL}/render-page/`;
    let pageSlug = slug;

    // If the pageSlug is not start with `/`, then create the slug with `/`
    if (!pageSlug.startsWith('/')) {
        pageSlug = `/${pageSlug}`;
    } …

我在Material-UI无头useAutoComplete钩子的帮助下在 React.js 中创建了一个自动完成组件。该组件工作正常。当用户尝试输入任何字符时，Listbox将自动打开。

但问题是当用户选择任何东西并注意输入元素时，ListBox重新打开。我怎样才能防止这种情况？

代码沙盒：

代码：

import React from 'react';
import useAutocomplete from '@material-ui/lab/useAutocomplete';

function AutocompleteComponent(props) {
  const { data } = props;

  const [value, setValue] = React.useState('');
  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpen = function () {
    if (value.length > 0) {
      setIsOpen(true);
    }
  };

  const handleInputChange = function (event, newInputValue) {
    setValue(newInputValue);
    if (newInputValue.length > 0) {
      setIsOpen(true);
    } else {
      setIsOpen(false);
    }
  };

  const {
    getRootProps,
    getInputProps,
    getListboxProps, …

这是一个架构问题而不是技术问题。我们的网络和移动应用程序完全依赖于社交认证，我们正在使用社交认证提供商，例如Google、Facebook等。

用户成功登录后，Google 和 Facebook 等提供商会通过电子邮件和唯一 ID 返回用户数据。我们将该数据存储在数据库中，如下所示。

+----+--------------------------------------------------------------+---------------+----------+
| id | socialId                                                     | email         | provider |
+----+--------------------------------------------------------------+---------------+----------+
| 1  | $2a$12$Qx.FVkgYkXqJGF4PyJ1kb.JlSDe9bV6TJFodpTx2eBsYxvqn6Gywa | a@example.com | Facebook |
+----+--------------------------------------------------------------+---------------+----------+
| 2  | $2a$12$N2fCTRxymPlcaID5oP617OJTXkrvKAHZ/taFJ.lePZddfW3E6U.Fe | b@example.com | Google   |
+----+--------------------------------------------------------------+---------------+----------+

所有数据库字段都是必需的且不能为空。

注意：出于安全原因，我们还socialIds以哈希格式存储，存储电子邮件有助于我们了解用户是新用户还是老用户，并有助于防止重复记录。

但有一个问题，有些提供商没有返回用户电子邮件。

所以识别用户是新用户还是老用户就成了一个问题，同时也造成了重复行的风险。

解决这个问题的最佳方法是什么？将 ID 以原始形式存储在数据库中是否合适？

这是一个React.js过滤器问题，我被困在这里。该问题将电影的静态数据作为对象数组，我们必须根据不同复选框的选中状态过滤该数据。

静态数据：

export const data = [
    {
        id: 1,
        title: 'Batman',
        rating: 1,
        genre: 'Action'
    },
    {
        id: 2,
        title: 'Superman',
        rating: 5,
        genre: 'Comedy'
    },
    {
        id: 3,
        title: 'Spiderman',
        rating: 3,
        genre: 'Thriller'
    },
    {
        id: 4,
        title: 'BananaMan',
        rating: 2,
        genre: 'Action'
    },
    {
        id: 5,
        title: 'OrangeMan',
        rating: 4,
        genre: 'Drama'
    }
];

抽象的 UI 有下图，代表了 2 种类型的过滤器。

• 评分
• 类型

截屏：

两个过滤器都作为复选框呈现在 UI 上。因此，我创建了一个名为的组件Checkboxes，它将采用一个名为 prop的组件list，它是一个对象数组。

这list代表了独特ids …

我正在使用laravel-mix建在的顶部webpack。我遇到了字体目录问题。例如，font-awesome程序包有一个scss文件和一个放置所有字体的字体目录。

font-awesome:.
????scss
?       fontawesome.scss
????webfonts
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2

所以我把这个包放在我的resources/assets/sass目录中。

resources:.
????asset
    ????sass
        ?   main.scss
        ?
        ????font-awesome (directory)

main.scss 包含代码：

@import 'font-awesome/scss/fontawesome';

webpack.mix.js 包含：

mix.sass('resources/assets/sass/main.scss', 'public/css/frontend.css');

所有资产均已成功编译。现在public目录有一个cssand font目录，其中包含所有这样的字体。

public:.
?   index.php
?
????css
?       frontend.css
?
????fonts
?       fa-regular-400.eot
?       fa-regular-400.svg
?       fa-regular-400.ttf
?       fa-regular-400.woff
?       fa-regular-400.woff2

但是我想要的是，我不想将所有字体都编译到public/fonts要编译为以下结构的目录中public/fonts/vendor/font-awesome

public:.
????css
?       frontend.css
?
????fonts
    ????vendor
        ????font-awesome
                fa-regular-400.eot
                fa-regular-400.svg
                fa-regular-400.ttf
                fa-regular-400.woff
                fa-regular-400.woff2

我需要在 …

我使用的是Vue.js与Laravel和面临的一个问题。我想将类别id从刀片文件传递给Vue.js组件作为道具。但不知道什么是好的做法和正确的方法。

我已经定义了这样的路线：

Route::view('/categories/{category}/edit', 'edit')->name('categories.edit');

我的edit.blade.php文件是：

@extends('master')

@section('vue')
    <div id="app">
        <categories-edit :id=""></categories-edit>
    </div>
@endsection

该Vue.js组件的代码是：

<template>
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-12">
                <div class="mb-3">
                    <label for="name" class="form-label">Name:</label>
                    <input type="text" v-model="formState.name" name="name" class="form-control" id="name" placeholder="Category Name" autocomplete="off">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   name: 'CategoriesEdit',
   props: ['id'],
   data: function () {
       return {
           formState: {
               name: '',
               photo: ''
           }
       }
   },
    mounted() {
       
    },
    methods: …

我面临一个问题，有一个名为的样式组件，Breadcrumb但该组件依赖于 1 个单独的样式组件，即BreadcrumbItem. 两个组件都有不同的道具。

面包屑项目.js：

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const propTypes = {
  /** Active the current BreadcrumbItem. */
  active: PropTypes.bool,
  /** Additional classes. */
  className: PropTypes.string
};



const AbstractBreadcrumbItem = (props) => {
  const { className, active, ...attributes } = props;

  return <li {...attributes} className={className} />;
};

AbstractBreadcrumbItem.propTypes = propTypes;

const BreadcrumbItem = styled(AbstractBreadcrumbItem)``;

BreadcrumbItem.propTypes = propTypes;

export default BreadcrumbItem;

面包屑.js：

import React from "react";
import styled …