小编Dog*_*Dog的帖子

在React高阶组件中散布道具的目的是什么?

我试图理解React的高阶组件的结构,但是所有资源仅假设您在编写时已经了解了扩展运算符在高阶组件中的用途:BaseComponent {... this.props} {。 ..this.state}。如果某个组件已经作为道具传入,为什么必须像这样散布道具?

import React, { Component } from 'react';

const EnhanceComponent = BaseComponent => {
    return class EnhancedComponent extends Component {
        state = {
            name: 'You have been enhanced'
        }
        render() {
           return ( 
           <BaseComponent {...this.props} {...this.state} />   
        )
       }
    }
};

export default EnhanceComponent;
Run Code Online (Sandbox Code Playgroud)

javascript reactjs higher-order-components

5
推荐指数
1
解决办法
675
查看次数

在React for Google Analytics(分析)中难以安装Google跟踪代码管理器

我正在尝试在React网站上安装Google跟踪代码管理器,但是当我阅读Google跟踪代码管理器的文档时,它表明我应该在每个页面的头部和正文中粘贴一个长脚本标记:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager --> 
Run Code Online (Sandbox Code Playgroud)

但是,React站点传统上不使用script标签。如何通过Google跟踪代码管理器有效,高效地设置我的React网站?SPA是否有特殊的React或JavaScript标签?

javascript google-analytics google-tag-manager reactjs

4
推荐指数
1
解决办法
8925
查看次数

在不知道 React/JavaScript 字体的情况下计算文本的像素宽度

我需要测量容器中单个单词(字符串)的像素长度。我正在缩小每个 div 的宽度,因此当文本换行时,它与容器完全平齐,因为有一个最大宽度导致它换行。此解决方案(及其用例)先前已在 Jquery 中对此答案进行了回答:

将 DIV 缩小为包装到其最大宽度的文本?

但是,上面的解决方案将每个单词放在一个跨度中,并使用 Jquery 的 .width() 方法来计算其物理大小。当我使用 React 时,我没有这个选项。

虽然我已经成功地使用 offsetWidth 方法来查找已呈现到 DOM 的项目的宽度,但我还没有找到其他可行的解决方案,这些解决方案不涉及将项目呈现到我可以用来查找宽度的 dom来自一个世界。

我在网上找到的一些解决方案提供了考虑字体因素的方法,但字体可能会改变,所以我需要一个更像 Jquery 的 .width() 的方法。

React/JavaScript(不是 Jquery)是否有任何方法可以确定单词的物理长度(以像素为单位),而无需将项目呈现到 dom 并且无需将字体类型放入函数中?

html javascript css reactjs

4
推荐指数
1
解决办法
5393
查看次数

在 React 中全局模拟 Jest/Enzyme 中的函数

我经常将函数导入到 React 组件中,并想使用 jest/enzyme 进行测试。

通常,我可以通过wrapper.instance().functionName访问组件中定义的函数,然后测试该函数是否已被调用。同样,在测试中安装组件时,我可以将模拟函数作为 props 传递,然后检查该组件是否已被调用。但是,我没有测试导入到组件中的函数的方法(未在内部定义或作为 props 定义)。

有没有办法使用 jest/enzyme 定义将在组件测试中使用的全局模拟函数,该函数将覆盖已导入到我正在测试的组件中的同名函数的实现?

mocking reactjs jestjs enzyme

3
推荐指数
1
解决办法
5776
查看次数

打开的窗口关闭后如何在 React 中触发事件

我在 React 中有一个带有 onClick 处理程序的 div,当单击该处理程序时,它会在弹出窗口中实现 window.open,将它们定向到外部 URL。当用户关闭弹出窗口时,我想实现一个 API 调用。但是,我尝试过的一切都失败了,包括尝试使用事件侦听器。

如何在 React 中检测窗口何时关闭?

我对窗口事件的当前代码如下:

export class App extends Component {

  opener = () => {
    const myWindow = window.open("https://www.espn.com", "MsgWindow", "width=200,height=100");
  }

  render() {  

    return (
      <div onClick={this.opener}>
        Hello World
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript window reactjs

2
推荐指数
1
解决办法
1293
查看次数

如何在AJAX请求后访问PHP超级全局post变量

我在index.php中有一个表单:

<form action="submit.php" method="post" id="registerSubmit">
    <input type="text" name="name" id="name" placeholder="Name">
    <button id="submit" type="submit">Submit</button>
</form>
<div id="result"></div>
Run Code Online (Sandbox Code Playgroud)

提交表单时,它会被Jquery拦截:

$(document).ready(function(){
    $("#registerSubmit").submit(function( e ) {
    e.preventDefault();
        $.ajax({
            url: "load.php",
            method: "post",
            data: "",
            dataType: "text",
            success: function(Result) {
                $('#result').text(Result)
            }
        })

    });
});
Run Code Online (Sandbox Code Playgroud)

但是,当AJAX请求被发送到load.php时.我无法访问超级全局post变量:

<?php
$name = $_POST['name']; 
echo $name;
?>
Run Code Online (Sandbox Code Playgroud)

我可以通过Jquery访问表单数据,但我不想解析JSON以发送到Mysql.如何在AJAX请求之后访问超级全局帖子表格数据,如果无法访问,通过Ajax将PHP表单数据发送到Mysql的最佳做法是什么?

php ajax jquery

1
推荐指数
1
解决办法
519
查看次数

ActiveRecord :: NoDatabaseError:致命:当我尝试在rails中迁移bd时,角色"postgres"不存在

我克隆了一个朋友的git repo,我正在尝试迁移数据库.我开始使用postgres,但是当我运行rails db:migrate时,我不断收到错误:

Rails Error: Unable to access log file.
Run Code Online (Sandbox Code Playgroud)

ActiveRecord::NoDatabaseError: FATAL:  role "postgres" does not exist 
Run Code Online (Sandbox Code Playgroud)

我已经在线尝试了所有可用的解决方案,但仍然遇到同样的错误.有谁知道我做错了什么?

postgresql activerecord ruby-on-rails

0
推荐指数
1
解决办法
726
查看次数