我有一个内联 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中测试过)
我们在一个页面上有几种状态,因此状态没有分配任何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) 我目前正在使用 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) 我已经使用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) 是否可以创建一个组件并以编程方式将事件侦听器附加到它?
我知道这对于<svelte:component/>通过传播使用道具很容易实现{ ...props }。我想知道是否可以实现类似的东西来附加事件侦听器。
例如,在下面的例子中,我想以编程方式连接on:message到A和on:count到B:
<!-- 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)