小编Mic*_*ker的帖子

我有一个React组件,它或多或少是一个用户可以键入的简单文本区域.以下是目前代码的样子:

import React from 'react';
import {connect} from 'react-redux';

function handleChange(event) {
    const {setText} = this.props;

    //is there some way I can detect [ENTER] here and call this.props.add instead?
    setText(event.target.value);
}

class TextArea extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {value} = this.props;

        return (
            <div className="list-item">
                <textarea
                    className="form-control"
                    value={value}
                    onChange={handleChange.bind(this)}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        value: state.value
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setText(text) {
            const action = {
                type: …

我的应用程序中有很多组件可以响应不同的按键操作,到目前为止,我的测试都没有使用任何TestUtils.Simulate.keyDown工作.看起来keyDown简单明了不起作用.

这是我正在尝试测试的组件:

description.js

var React = require('react/addons');

var Description = React.createClass({
    render : function () {
        return (
            <div className="description">
                <input type="text" ref="input"/>
            </div>
        )
    }
});

module.exports = Description;

这是一个失败的简单测试:

描述-test.js

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var expect = require('expect');
var Description = require('../description');

describe('Description', function () {
    it('updates input value on key press', function () {
        var description = TestUtils.renderIntoDocument(<Description/>);
        var input = React.findDOMNode(description.refs.input);
        expect(input.value).toEqual(''); //This passes
        TestUtils.Simulate.keyDown(input, {key : "a"}); …

假设我有一个看起来像这样的组件:

var React = require('react/addons');

var ExampleComponent = React.createClass({
    test : function () {
        return true;
    },
    render : function () {
        var test = this.test();
        return (
            <div className="test-component">
                Test component - {test}
            </div>
        );
    }
});

module.exports = ExampleComponent;

在我的测试中,我可以使用这个组件来渲染这个组件TestUtils,然后如下所示:

var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>);
sinon.stub(renderedComponent, 'test').returns(false);
expect(renderedComponent.test).toBe(false); //passes

但有没有一种方法可以告诉Sinon每次创建该组件的实例时都会自动删除组件的功能？例如:

sinon.stubAll(ExampleComponent, 'test').returns(false); //something like this
var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>);
expect(renderedComponent.test).toBe(false); //I'd like this to pass

如果这是不可能的,是否有一个潜在的解决方案接近提供我正在寻找的功能？

最近,我一直在将Material Design Lite集成到我的React Web应用程序中.在大多数情况下,一切都很好,但目前我在React的事件处理方面存在一些问题,这似乎与某些MDL组件不太匹配.

特别是,我有一个带有onClick处理程序的DOM元素,它可以很好地工作,直到添加MDL工具提示,这会导致onClick不再触发.我已经尝试了几乎所有可能的变化(把工具提示放在DOM的其他地方,将onClick处理程序附加到一个容器div,它有一个小孩的工具提示等),我似乎无法让它工作.

这是一个演示该问题的JSBin(我还包含了一个示例,该示例使用jQuery在组件安装后将单击处理程序绑定到元素,实际上可以正常工作):

http://jsbin.com/sewimi/3/edit?js,output

我有一些理论为什么这不起作用,但我不知道React或MDL验证它们中的任何一个.

我认为它与React处理事件的方式有关,并且出于某种原因,MDL似乎与它发生冲突.从文档:

React实际上并不将事件处理程序附加到节点本身.当React启动时,它会使用单个事件侦听器开始侦听顶级的所有事件.安装或卸载组件时,只需在内部映射中添加或删除事件处理程序.当事件发生时,React知道如何使用此映射调度它.当映射中没有事件处理程序时,React的事件处理程序是简单的no-ops

这使得看起来MDL可能会搞乱React的事件内部映射,这导致我对元素的点击成为无操作.但同样,这只是一个完整的猜测.

有没有人对此有任何想法？我宁愿不必componentDidMount为每个使用MDL工具提示的组件手动绑定事件监听器(就像我在我提供的示例JSBin中所做的那样),但这是我现在要使用的解决方案.

此外,由于我不确定这是否是MDL特定的错误,我选择在此处发布此问题而不是在他们的问题页面上.如果有人认为我也应该在那里发布,请告诉我,我可以做到.

谢谢!

我在React中有两个组件可以很好地渲染并在浏览器中产生预期的行为,但是在通过Jest运行测试时似乎无法渲染.

descriptions.js

var React = require('react/addons');
var $ = require('jquery');
var Description = require('./description.js');

var Descriptions = React.createClass({
    getInitialState: function () { //container always starts with at least one description field that is empty, or whatever is contained in props
        var descriptions = [];
        if (this.props.info == null) {
            descriptions.push({num: 0, data: ''});
        } else {
            $.each(this.props.info, function (i, string) {
                descriptions.push({num: i, data: string});
            });
            if (descriptions.length == 0) { //we want at least one description field at all …

现在我有一个简单的 Spring Boot 应用程序，它提供我放置在resources/static/img. 这适用于显示实际内容，但我想解决两件事：

1. 我不希望这些图像中的任何一个与生成的.jar文件捆绑在一起，我知道将这些图像放在resources文件夹中会做到这一点。

2. 使用我当前的设置，为了在 webapp 上看到一个新图像，我必须将它添加到文件夹中并重新启动它。相反，我希望 Spring 提供存在于特定文件夹中的任何静态内容，因此我可以在应用程序运行时添加图像，并让它们在localhost:8080/img/{image name}.

我试图通过设置一个资源处理程序来解决这个问题，但我不确定这与简单地从resources/static. 不幸的是，我仍在努力正确配置它，因为我根本看不到任何图像。这是我尝试过的：

@Configuration
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/**").addResourceLocations("file:" + Application.IMAGE_DIR);
        super.addResourceHandlers(registry);
    }
}

这是我的应用程序配置：

@SpringBootApplication
public class Application extends SpringBootServletInitializer {

    static String IMAGE_DIR;

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Application.class);
    }

    public static void main(String[] args) throws IOException {
        SpringApplication.run(Application.class, args);
        IMAGE_DIR = new File(".").getCanonicalPath() + "/img/";
    } …

最近，我加强了Keycloak部署，以使用专用的Infinispan群集作为remote-storeKeycloak各种缓存的额外持久层。更改本身进行得相当不错，尽管进行了更改之后，由于expired_code错误消息，我们开始看到很多登录错误：

WARN [org.keycloak.events] (default task-2007) type=LOGIN_ERROR, realmId=my-realm, clientId=null, userId=null, ipAddress=192.168.50.38, error=expired_code, restart_after_timeout=true

通常，在同一时间段内从同一IP地址重复多次多次出现此错误消息。造成这种情况的原因似乎是最终用户的浏览器在登录时会无限重定向，直到浏览器本身停止循环为止。

我已经看到了各种GitHub问题（https://github.com/helm/charts/issues/8355），也记录了此行为，并且共识似乎是这是由Keycloak群集无法正确发现其成员引起的通过JGroups。

当您考虑到某些Keycloak缓存在中的默认配置中分布在Keycloak节点上时，此解释才有意义standalone-ha.xml。但是，我已将这些高速缓存修改为本地高速缓存，并remote-store指向我的新Infinispan群集，并且我认为我对该运行方式做出了一些不正确的假设，导致此错误开始发生。

这是我的Keycloak缓存配置的方式：

WARN [org.keycloak.events] (default task-2007) type=LOGIN_ERROR, realmId=my-realm, clientId=null, userId=null, ipAddress=192.168.50.38, error=expired_code, restart_after_timeout=true

请注意，与默认standalone-ha.xml配置文件相比，此缓存配置的大部分保持不变。我在这里所做的更改是将以下缓存更改为local并将它们指向我的远程Infinispan群集：

• sessions
• authenticationSessions
• offlineSessions
• clientSessions
• offlineClientSessions
• loginFailures
• actionTokens
• work

这是我的remote-cache服务器的配置：

<subsystem xmlns="urn:jboss:domain:infinispan:7.0">
    <cache-container name="keycloak" module="org.keycloak.keycloak-model-infinispan">
        <transport lock-timeout="60000"/>
        <local-cache name="realms">
            <object-memory size="10000"/>
        </local-cache>
        <local-cache name="users">
            <object-memory size="10000"/>
        </local-cache>
        <local-cache name="authorization">
            <object-memory size="10000"/>
        </local-cache>
        <local-cache name="keys">
            <object-memory size="1000"/>
            <expiration …

在我看来,我有两个div,一个负责在我的数据库中添加一个条目,另一个负责在页面加载时显示我的所有数据库表行.负责显示我的表内容的div使用Datatables jQuery插件,这使得我的生活更容易显示这些内容.

这两个div都可以单独使用.但是,我想将它们集成在一起,这样当我使用我的第一个div添加一个条目时,数据库就会更新,然后这个条目会附加到我的第二个div中的Datatable中,而不会重新加载整个页面.

我知道,这个过程中单独容易足够使用数据表API,只需通过使用row.add()和绘制()函数,这是可以做到,并且表现出在这里.

虽然这是一个潜在的解决方案,但我并不完全满意,因为我的页面的其余部分使用jQuery的slideDown()来获得整洁的动画,我希望我可以应用这个动画来向我的数据表添加另一行.如果你看看他们的例子,它只是插入行,但如果我可以从表中向下滑动它会更好看.

这可以在不花太多时间的情况下完成吗？或者我应该坚持使用Datatables API并放弃尝试动画它？我已经尝试过使用jQuery手动附加一个新行,但它看起来很糟糕,因为我不认为我可以重新加载插件来采用更改为Datatable.

有人可以指点我正确的方向吗？谢谢!

我对 XSLT 还很陌生，我遇到了一个问题，我有一个包含未知数量的孩子的元素，我需要在表格中显示这些孩子，以便有 5-6 列可用于显示信息。

如果我得到一个如下所示的 XML 文件：

<books>
    <book>
        <author>Ralls, Kim</author>
        <title>Midnight Rain</title>
    </book>
    <book>
        <author>Corets, Eva</author>
        <title>Maeve Ascendant</title>
    </book>
    <book>
        <author>Corets, Eva</author>
        <title>Oberon's Legacy</title>
    </book>
    <book>
        <author>Randall, Cynthia</author>
        <title>Lover Birds</title>
    </book>
    <book>
        <author>Thurman, Paula</author>
        <title>Splish Splash</title>
    </book>
    <book>
        <author>Knorr, Stefan</author>
        <title>Creepy Crawlies</title>
    </book>
    <book>
        <author>Kress, Peter</author>
        <title>Paradox Lost</title>
    </book>
    <book>
        <author>Crichton, Michael</author>
        <title>Jurassic Park</title>
    </book>
    <book>
        <author>Orwell, George</author>
        <title>1984</title>
    </book>
    <book>
        <author>Martin, George</author>
        <title>A Song of Ice And Fire</title>
    </book>
</books>

我想在一个由两行五列组成的表格中显示这 10 本书。

我已经走了这么远：

<xsl:template match="books" mode="table"> …

我正在尝试在Javascript中创建一个数组,其大小等于在DOM中找到某个类的次数,然后迭代它以从该类中的输入字段中获取文本.我可以像这样轻松地做到这一点:

var count = 0;
$('.className').each(function() {
    count++;
});
var classes = new Array(count);
count = 0;
$('.className input[type=text]').each(function() {
    classes[count++] = $(this).val();
});

对于看起来相对简单的任务来说,这看起来像很多代码.是否有更有效或更少冗长的方式？

谢谢