小编tot*_*oob的帖子

我正在将由a生成的内容解析wysiwyg为React中的目录小部件.

到目前为止,我正在遍历标题并将它们添加到数组中.

如何将它们全部放入一个多维数组或对象(最好的方法),使它看起来更像:

h1-1
    h2-1
        h3-1

h1-2
    h2-2
        h3-2

h1-3
    h2-3
        h3-3

然后我可以在UI中使用有序列表进行渲染.

const str = "<h1>h1-1</h1><h2>h2-1</h2><h3>h3-1</h3><p>something</p><h1>h1-2</h1><h2>h2-2</h2><h3>h3-2</h3>";

const patternh1 = /<h1>(.*?)<\/h1>/g;
const patternh2 = /<h2>(.*?)<\/h2>/g;
const patternh3 = /<h3>(.*?)<\/h3>/g;

let h1s = [];
let h2s = [];
let h3s = [];

let matchh1, matchh2, matchh3;

while (matchh1 = patternh1.exec(str))
    h1s.push(matchh1[1])

while (matchh2 = patternh2.exec(str))
    h2s.push(matchh2[1])
    
while (matchh3 = patternh3.exec(str))
    h3s.push(matchh3[1])
    
console.log(h1s)
console.log(h2s)
console.log(h3s)

使用jQuery并在每个h1内的内容周围有一个包装容器,我可以很容易地隐藏它们.

但没有包装容器,怎么会这样呢？

什么是在下一个h1之前做一些隐藏所有事情的最佳方法？

我没有使用jQuery,因为这是React应用程序的一部分.

h1 {
  border-bottom: solid 1px #000;
}

span {
  float: right;
}

<h1>h1 <span>x</span></h1>
<p>test 1</p>
<h2>h2</h2>
<p>test 2</p>

<h1>h1-1 <span>x</span></h1>
<p>test 3</p>
<h2>h2-2</h2>
<p>test 4</p>

或者在div标签中的下一个h1之后和之前包装所有内容？

我们目前正在寻找现代前端框架的体验,例如对MVC4项目的反应.我们在模型中使用数据注释,并且我们有很多在UI上使用不显眼的验证的表单.

主要的是找到一种方法来使用react来生成内容,同时仍然能够利用不显眼的验证等功能.据我所知,它实际上只是在使用像TextAreaFor,ValidationMessageFor这样的html助手时动态生成的一堆data-val属性,其属性从模型类中的数据注释中获取值.

我尝试了几件事,包括

 ReactDOM.render(
 @using (Html.BeginForm("xyz", "xyz", FormMethod.Post))
 {
      @Html.TextBoxFor(x => x.Email)

这导致输入框由于某种原因无法编辑

我更喜欢做更喜欢的事情

 ReactDOM.render(
      <form><input type="text" data-val="@Model.datannotations[1].val" /></form>

那可能吗？如何从模型中获取data-val值？实现这一目标的最佳方法是什么？

我正在使用CSS网格布局构建一个响应式模板(仍然在学习),感谢你们中的一些人,我已经完成了大部分工作.

• 移动(最大宽度:767px)

  • 一切都应该出现在自己的行上

• 平板电脑(最小宽度:768px)

  • nav在第一行
  • 在第二个和第二个主要

• 桌面(最小宽度:992px)

  • 与平板电脑相同,但水平间距为10%

• xl桌面(最小宽度:1920px)

  • 与桌面相同,但最大宽度为1920px

问题是我正在使用header标签来为左边和右边的间距着色nav.无论我使用标头还是div,只是为空着色空间着色空容器似乎不对.有没有办法让我position: fixed在整个顶部应用？

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */ …

随着阵列

['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];

我想构建一个看起来像这样的地图对象:

{
    'social': {
        swipes: {
            women: null,
            men: null
        }
    },
    'upgrade': {
        premium: null
    }
}

const menu = ['/social/swipes/women', '/social/likes/men', '/upgrade/premium'];
const map = {};

const addLabelToMap = (root, label) => {
  if(!map[root]) map[root] = {};
  if(!map[root][label]) map[root][label] = {};
}

const buildMenuMap = menu => {
  menu
    // make a copy of menu
    // .slice returns a copy of the original array
    .slice()
    // convert the string to an array by splitting …

我在这里看了其他的例子,但找不到一个让这个工作.我希望在页面滚动时侧边栏(部分)是粘性的.位置:粘贴有效,如果我把它放在导航,所以我的浏览器def支持它.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  position: sticky;
  top: 0;
  left: 0;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}

<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <p>hi</p>
  </article>
</main>

我有一个非常简单的mongo方案,我正在用猫鼬访问

我可以使用populate将用户名和名字映射到每个通知的字段,问题是我似乎无法在日期字段上进行任何排序

使用此代码我得到一个错误

MongooseError:无法在路径notification.from上填充sort,因为它是文档数组的子属性

是否有可能以不同的方式或更新的方式(深度填充,虚拟)这样做？我在使用Mongoose 5.

我宁愿不使用vanilla javascript来对对象进行排序或创建单独的模式

var UserSchema = new Schema({  
    username: String,
    firstname: String,
    notifications: [
        {  
            from: { type: Schema.Types.ObjectId, ref: 'User'},
            date: Date,
            desc: String
        }
    ]
});

app.get('/notifications', function(req, res) {
    User.findOne({ _id: req._id }, 'notifications')
    .populate({
        path: 'notifications.from',   
        populate: {
            path: 'from',
            model: 'User',
            options: { sort: { 'notifications.date': -1 } }            
        }
    }) 
    .exec(function(err, user) {
        if (err) console.log(err)
    })
});

关于Mongo,这个可能重复的事实差不多已经有两年了.我问是否有更新或不同的方式在Mongoose中这样做,因为自2016年以来它已经改变了一些新的功能.

在不更改HTML的情况下,如何在单击时获取每个幻灯片容器的索引？

例如.他们点击2,我怎么得到这样的价值node[1]？

document.getElementById("slides").addEventListener("click", function(e){
	console.log(e.target);
});

<section id="slides">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</section>

我有一个漂亮的响应css模板使用CSS网格,我想使这个响应css网格的标题粘,但由于标题和导航设计的方式,我不能让它使用固定定位.

有没有一种更好的方法来实现这一点,我可能还没有看过一些网格属性？

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
  position: fixed;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav, …

我知道这是主观的和自以为是的，但我只需要一些东西来了解最佳实践可能是什么。

我有一个在 localhost 上运行的MERN应用程序，其中 React 脚本当前在端口 3000 上运行，而 Express.js 应用程序在端口 3001 上运行。

现在我要在 AWS 上实时设置它，我想知道我是否应该像这样创建它：

website.com对于前端 React 东西，nginx 将任何从端口 80 路由到 3000 的东西，同时它调用api.website.com在同一实例上的 3001 上运行，website.com并且`api.website.com 具有相同的 IP 地址。

或者

一个单独的网站实例在不同的 IP 地址上，另一个实例api.website.com在不同的 IP 地址上用于 API 调用？无需指定端口即可访问两者。

我很好奇，因为大部分时间我都使用过 API，它们没有单独的端口，只是我认为是不同 IP 地址和不同实例的子域。

记住我想使用 SSL，最好的设置方法是什么？