小编Fre*_*e09的帖子

是否可以将扩展运算符与 React Native 中的样式组件一起使用？

我有这个组件：

const StyledHeaderText = styled.Text`
fontFamily: ${props => props.theme.font};
fontSize: ${props => props.theme.fontSizeSubtitle};
color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor}
`;

但是可以说，在我的主题中，我有一个同时具有 fontFamily 和 fontSize 的对象，并且我在整个应用程序中都使用它。我想知道我是否可以做这样的事情，目前它不起作用：

const StyledHeaderText = styled.Text`
...${props => props.theme.fontHeader};
color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor}
`;

例如，这在 iOS 中设置高程也很有用，因为我必须设置 4 种样式。

谢谢

我正在 React 中创建自己的灯箱，但在实现 keyDown 事件时遇到了问题。当我打开图像时，我想要a图像 - 1 的d键和图像 + 1 的键。我只实施console.log(e.key)检查是否一切正常。我发现了一个问题，即我的 KeyDown 事件仅在我将焦点放在向左或向右按​​钮上时才起作用。当我点击照片键不起作用。

灯箱：

<div 
  onKeyDown={this.nextButtonImage} 
  onClick={this.closeLightbox} 
  className="lightbox-container">
  <div className="lightbox">
    <button onClick={this.closeLightbox} className="lg-close">
      <i className="fas fa-times" />
    </button>
    <button onClick={this.prevImage} className="lg-arrows lg-left">
      <i className="fas fa-caret-left" />
    </button>
    <button onClick={this.nextImage} className="lg-arrows lg-right">
      <i className="fas fa-caret-right" />
    </button>
    <img src={this.images[this.state.openImage].url} alt="" />
  </div>
</div>

keyDown 事件：

nextButtonImage = (e) => {
  console.log(e.key);
}

我正在学习正则表达式，我想在react app中实现它，所以当我在输入字段上写东西时，我想允许用户只写数字和最大一个空格。此字符串还必须以+字符开头。我的正则表达式工具向我显示了良好的结果，但是在应用程序中我什么都没写。

const handlePhone = ({currentTarget}) => {
    let val = currentTarget.value;
    // Regular expression
    const reg = /^\+\d+/g;
    const isNumber = val.match(reg);
    if (isNumber || val === '') {
      setFieldValue('phone', val);
    }
  };

我想用这个表达式实现它：以+开头，以后可以写一些数字。

但是在应用程序中，我什么都不能写。为什么此工具与实时匹配有很大不同？

有了这个：

const reg = /^\+\d+( \d+)*$/;

我用来@nuxtjs/markdownit解析 markdown 文件，我想在'markdown-it-anchor'插件中启用创建永久链接功能，我使用了以下代码nuxt.config.js但不起作用：

  modules: [\n    // Doc: https://axios.nuxtjs.org/usage\n    '@nuxtjs/axios',\n    '@nuxtjs/markdownit'\n  ],\n  markdownit: {\n    preset: 'default',\n    linkify: true,\n    breaks: true,\n    typographer: true,\n    html: false,\n    use: [\n      'markdown-it-anchor',\n      'markdown-it-attrs',\n      'markdown-it-div',\n      'markdown-it-toc-done-right',\n      'markdown-it-emoji'\n    ]\n  },\n  'markdown-it-anchor': {\n    level: 1,\n    // slugify: string => string,\n    permalink: true,\n    // renderPermalink: (slug, opts, state, permalink) => {},\n    permalinkClass: 'header-anchor',\n    permalinkSymbol: '\xc2\xb6',\n    permalinkBefore: true\n  },\n

单击时是否可以删除过渡幻灯片v-tabs？

 <v-tabs v-model="tab" :transition="false" :reverse-transition="false">
        <v-tab href="#tab1" >
          tab1
        </v-tab>
        <v-tab href="#tab2">
          tab2
        </v-tab>
      </v-tabs>

这不起作用

I have two inline elements and I want to change the order of these elements without changing the HTML code. It's possible to do this with CSS only? I know how to change order with flex and grid etc. but these are only for block elements and I am curious if this can be done with inline elements also

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  max-width: 300px;
  border: 2px solid red;
  margin: 2rem; …

我想从任何 * 路由重定向到我的主页，因为我想将 url 更改为“/”。

我跟着这个链接：

React-Router：没有未找到的路由？

但是当我想更改任何路由路径时，它会将我独立移动到 url '/'

<Route exact path="/" component={MMPStudio} />
<Route exact path="/galeria" component={Gallery} />
<Route exact path="/kontakt" component={Contact} />
<Route exact path="/fotobudka" component={Fotobudka} />
<Route exact path="/jubiler" component={Jubiler} />{" "}
<Route exact path="/fotobudka/kontakt" component={FotobudkaContact} />
<Route exact path="/jubiler/galeria" component={JubilerGallery} />

<Switch>
    <Route exact path="/" component={MMPStudio} />
    <Redirect from="*" to='/' />
</Switch>

我正在使用 i18n 单文件组件为我的应用程序提供翻译支持。为此，我使用的标签如下

<i18n>
{
  "fr": {
    "text": "blabla in french 
             blabla
             bla"
  },
  "en": {
    "text": "blabla in english
             bla"
  }
}
</i18n>

但是我有多行带有 html 格式的文本，如何对长 html 文本使用语言处理？

我正在使用网格创建一个简单的两列布局。第一个包含图像，第二个仅包含几段。我想将图像高度设置为与带有文本的第二个 div 相同。我的 template-rows 属性设置为min-content在 Firefox 上完美运行，但在 Chrome 上我的图像扩展到其全部高度。

在两个不同的浏览器中显示此示例以查看差异。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content;
  width: 1000px;
  margin: 0 auto;
}

img {
  width: 100%;
  max-height: 100%;
}

<div class="grid">
  <img src="https://m.media-amazon.com/images/M/MV5BNjgwNjkwOWYtYmM3My00NzI1LTk5OGItYWY0OTMyZTY4OTg2XkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_.jpg" alt="">
  <div>
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab …

我正在使用 Adob​​e After Effects 和 React Lottie 创建动画，并且我有许多由 Bodymovin 扩展生成的 json 文件。我以这种方式导入文件：

import * as initial from './white_bird.json';
import * as hoverOn from './white_bird_hover_on.json';
import * as hoverOff from './white_bird_hover_off.json';

但是，当我有 6 个其他组件时，它们看起来相同，但仅在导入的文件上彼此不同。我怎样才能把这些行写在上面，如下所示：

const data = {
    initial: import * as initial(`./${some_param}.json`),
  };

请注意，我必须像“* as”一样导入它，以另一种方式这是行不通的