小编F L*_*has的帖子

SVG childNodes 返回文本

我有一个内联 SVG 并尝试循环遍历组元素内的所有路径。使用时childNodes我发现浏览器text为每个路径添加一个额外的子路径。我很好奇为什么浏览器要这样做,以及是否有一种聪明的方法来循环真正的子元素。

我创建了一个小 JSBin 来演示该行为:http://jsbin.com/tutisakege/1/edit ?html,css,js,console,output

(查看控制台的输出)

超文本标记语言

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">
  <g id="test">
    <path d="M50 0 L0 100 L100 100 Z" />
    <path class="red" d="M25 0 L25 25 L75 0 L75 25 Z" />
  </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

JS

var group = document.querySelector('#test'),
    children = group.childNodes;
Run Code Online (Sandbox Code Playgroud)

尽管我的测试组只有2 条路径,但该children对象现在拥有5 个条目。

注意:我知道我可以循环遍历所有条目并检查是否有 的实例,SVGPathElement但这对我来说似乎很麻烦。

(我已经在最新的Chrome和Firefox中测试过)

javascript svg dom

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

没有URL的状态的AngularJS ui-router默认状态

我们在一个页面上有几种状态,因此状态没有分配任何URL.有没有办法为无URL状态指定默认状态?也许类似于$urlRouterProvider.otherwise('/');.

我尝试在Angular的run语句中或在控制器内进入状态,但这会导致transition superseded错误,这可能是由于$state尚未初始化的事实.

以下是一个简短的例子.我想直接开始stateA.

angular
  .module('myModule')
  .config([
    '$stateProvider',
    function($stateProvider) {
      $stateProvider
        .state('stateA', {
          controller: function () {
            // Do some magic related to state A
          }
        })
        .state('stateB', {
          controller: function () {
            // Do some magic related to state B
          }
        });
    }
  ])
  .controller(['$state', '$timeout', function($state, $timeout){
    // My global controller
    // To set a default state I could do:
    // $timout(function () {
    //   $state.go('stateA'); 
    // }, …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-ui-router

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

Apache commons CLI 的条件命令行选项

我目前正在使用 Apache 的通用 CLI 库来解析命令行选项,我想知道是否有一种简单的方法来满足条件要求。

例如,在下面的示例中,我有两个必需选项-a-b一个可选选项-h,其中应显示一些描述。解析器现在的工作方式是,只要缺少必需的选项之一,它就会抛出 ParserException。到目前为止,一切都很好。-h我的问题是是否有一种方法可以在指定时不查找所需的选项。由于这种情况很常见,-h只应打印帮助而不实际启动我的应用程序,因此我想跳过检查其他命令行选项。

import org.apache.commons.cli.*;

public class MyClass {

    ...

    public static void main(String[] parameters)
    {
        Options options = new Options();

        Option opt_a = Option.builder("a")
                .argName("A Option")
                .required(true)
                .longOpt("a-option")
                .desc("First option")
                .build();

        Option opt_b = Option.builder("b")
                .argName("B Option")
                .required(true)
                .longOpt("b-option")
                .desc("Second option")
                .build();

        Option opt_h = Option.builder("h")
                .argName("Help")
                .longOpt("help")
                .desc("Shows this help")
                .build();

        options.addOption(opt_a);
        options.addOption(opt_b);
        options.addOption(opt_h);

        CommandLineParser parser = new DefaultParser();

        try {
            CommandLine cmd = …
Run Code Online (Sandbox Code Playgroud)

java apache-commons-cli

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

反应上下文使用者如何访问对使用者组件的引用

我已经使用React新上下文API构建了一个更高阶的组件并且我试图找到一种方法(能够通过ref()包装子组件访问该引用)。

tl / dr:本质上,我想将ref转发Consumer到实际组件。

这是一个具体的例子。该RootComponent集的值CoolProvider是假设在所有被曝光包裹子组件。子组件使用进行包装withCool(),使其可以访问props.cool。(当然,在一个现实世界的示例中,一切都更加复杂,并且包含数十个组件。)

现在,不知道子组件是否已被包装,我希望能够通过对其进行引用,ref()如图所示,RootComponent但是不幸的是,被包装的组件ref()不再起作用,因为它们已经起作用了!

观看此现场演示(https://jsfiddle.net/64t0oenz/3/)并检查Web控制台。您将看到仅触发了非包装组件的回调。

我的问题是:有没有办法将参考请求从转发CoolConsumer到实际组件,以便父组件可以访问其参考?

const { Provider: CoolProvider, Consumer: CoolConsumer } = React.createContext();

const withCool = Component => props => (
  <CoolConsumer>
    {cool => <Component {...props} cool={cool} />}
  </CoolConsumer>
);

class ChildComponent extends React.Component {
  render() {
    return this.props.cool ? (
        <div>Isn't …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

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

Svelte v3 以编程方式创建一个带有 props 和事件监听器的组件

是否可以创建一个组件并以编程方式将事件侦听器附加到它?

我知道这对于<svelte:component/>通过传播使用道具很容易实现{ ...props }。我想知道是否可以实现类似的东西来附加事件侦听器。

例如,在下面的例子中,我想以编程方式连接on:messageAon:countB

<!-- App.svelte -->
<script>
    import A from './A.svelte';
    import B from './B.svelte';

    let message = 'Hi there ';
    let count = 0;

    const components = [{
        component: A,
        props: { message },
        listeners: { message: (m) => { console.log(`They say "${m}"`); } }
    }, {
        component: B,
        props: { count },
        listeners: { click: () => { count++; } }
    }];
</script>

{#each …
Run Code Online (Sandbox Code Playgroud)

svelte svelte-3

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