小编pen*_*yal的帖子

我有简单的代码，其中包含带有<use>标签的svg 图标到使用 stencjiljs（tsx 语法）创建的 web 组件中。但是，当我xlink:href向<use>标签添加属性时，我收到错误Identifier expected。

Example code: 
import { Component, Prop } from '@stencil/core';

@Component({
   tag: 'example-component',
   styleUrl: 'example-component.scss',
})

 export class ExampleComponent {
     render() {
        return (
            <svg>
                <use href="#iconid" xlink:href="#iconid"/>
            </svg>
       );
    }
}

我厌倦了寻找 tsx/jsx 特定的解决方案，但我得到的只是它xLinkHref在 React 中，在这种情况下不起作用。

我有具体的方法来做到这一点吗？

我有简单的CSS网格.我希望它可以让孩子们尽可能地填充可用的内容,但是如果有孩子的话,也要尊重他们height: 0.现在它也为孩子"预留"空间height: 0.这是显示我的问题的小提琴:https: //jsfiddle.net/f3r0b5e9/7/

.wrapper {
  height: 300px;
  width: 200px;
  border: 1px solid red;
  display: grid;
  align-content: stretch;
  grid-template-rows: auto;
}

.child {
  width: 100%;
  border: 1px solid blue;
  background: #cad5e8;
}

.child.one {
  height: 0;
  min-height: 0;
  max-height: 0;
}

<div class="wrapper">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>

以下是我要完成的工作:http: //prntscr.com/kqcry4

注意:我知道如何使用flexbox :)

谢谢!