小编Tim*_*Lee的帖子

因此,我已经开始react helmet使用我的客户端应用程序,facebook og根据应用程序中的哪个页面处于活动状态,将标记重新呈现到头部.

但是facebook调试器facebook本身并没有选择任何一个.我错过了什么吗？这只能用于服务器端渲染页面吗？

我希望不是因为我必须学习node.js!

 <Helmet>
    <title>{props.title}</title>
    <meta property="og:url" content={ogUrl} />
    <meta property="og:type" content={props.type} />
    <meta property="og:title" content={props.title} />
    <meta property="og:description" content={props.desc} />
    <meta property="og:image" content={ogImg} />
 </Helmet>

我正在使用此处描述的细长选项卡组件：

https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.5.1

在两个选项卡中，我有以下苗条的模板代码：

<TabPanel>
    <Filter/>
    <div id='to-filter' class='scroll-container'>
        {#each value.items as item, i}
                <Item 
                itemFilter={item.name}  
                itemDay={item.itemDay} 
                itemMonth={item.itemMonth} 
                itemYear={item.itemYear} 
                itemCity={item.itemCity} 
                itemCountry={item.itemCountry} 
                itemVenue={item.venue}
                itemLink={item.link}
                itemDotw={itemDatesOnly[i].itemDotw}
                />
        {/each}
    </div>
</TabPanel>

每次我点击选项卡在数据之间切换时，它似乎重新加载或重建它。如何调整选项卡组件，使其不会每次都破坏数据？

在React Motion v4中努力让我的头围绕' 旋转 '和' 缩放 '并且似乎无法在网上找到更多如何做到这一点.它很容易改变一个简单的css属性以及如下所示的简单状态更改:

<Motion 
 defaultStyle={{opacity: 0}}
 style={{opacity: spring(this.state.isActive ? 1 : 0, {stiffness: 200, damping: 12})}}>
 {style => 
  <div style={{opacity: style.opacity}} className="action-panel">
   <div id="action-content" className="action-panel-content"></div>
  </div>
 }                            
</Motion>

但是,如何使用更复杂的css属性(例如' transform:rotate(90deg) ')来完成上述操作？

最后,如果我想要更复杂的状态逻辑,例如在翻转和转出时发生的动画,如果各种状态为真或假,哪里最好这样做？在使用React Motion之前,我根据状态和一些条件更新了元素的内联样式,我现在还不确定如何使用React Motion.你的想法会受到欢迎!:d

t xx

我使用 webpack 4 和 mini-css-extract-plugin 以及 sass-loader / node-sass 将我的 sass 编译为 css。一切似乎都工作正常，但是位于导入的 scss 文件中的 mixin 将无法工作，并且我收到构建错误。

ERROR in ./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js??ref--6-2!./src/sass/components.scss
Module build failed:
  @include radi(10px);
          ^
      No mixin named radi
      in /Users/Me/Sites/project/src/sass/components.scss (line 15, column 12)
 @ ./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js??ref--6-2!./src/css/core.css 6:10-150

奇怪的是，如果我将该 mixin 移动到引用它的 scss 文件中，那么它就会工作并编译。导入的 scss 文件的顺序是我首先查看的地方，但是 mixins 在调用它之前加载，所以我真的很困惑为什么这一直失败:(

mixins.scss 的内容

@mixin radi($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
};

Components.scss 的内容

.box {
   width: 100px;
   @include radi(10px);
   background-color: pink;
}

然后我有一个 core.css 文件，它导入我所有的 scss 文件

@import url("../vendor/normalize.css"); …

我正在使用Svelte和Parcel以及Sass，但无法在<style>标签中获取任何 scss 来正确渲染。下面是我正在使用的示例。

<style lang="scss">
   $base-color: #c6538c;
   $border-dark: rgba($base-color, 0.88);

   .alert {
     border: 1px solid $border-dark;
   }
</style>

考虑这个 Svelte 代码：

https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2

我如何调整它以便每个按钮都可以独立切换？正如您所看到的，它当前切换所有按钮:(

考虑这个苗条的代码

   {#await}
   <div class='loading'>
     <p>LOADING LOGO ANIMATION</p>
   </div>  
   {:then value}
   <div class='loaded'>
     <p>Main site content</p>
   </div> 

我想从加载“等待”部分到加载所有内容时添加过渡或动画。我希望加载部分淡出，只有当加载的内容完全淡出时才会淡入。有什么想法吗？可以这样做吗？