小编Chr*_*ris的帖子

我有一个混乱的HTML,我无法改变它,它看起来像这样:

<div>
  <h2>This is a title cat</h2>
  <p>This is a message</p>
  <p>One cat</p>
  <p>Two cat</p>
  <p>Three cat</p>
  <h2>This is a title dog</h2>
  <p>Dog 0</p>
  <p>Dog 1</p>
  <p>Dog 2</p>
  <p>Dog 3</p>
</div>

现在我想在h2元素更大胆之后做出每一个奇怪的p.所以我希望这是大胆的:

This is a message

Two cat

Dog 0

Dog 2

如何在CSS中编写选择器(没有jQuery,没有JS可用)来使这些文本变粗？

我有一个页面，其中包含多个图像。当页面加载时，它为每个 IMG 提供一个默认图像：

import default from './pics/default.jpg';

<img src={default} alt="#"/>

我想要的是这样的：

<img src1={default} src2="img url" alt="#"/>

其中 src2 在加载时覆盖 src1。

编辑： 第一个图像 (src1) 在页面加载时出现，而第二个 (src2) 是通过 Internet 请求的。示例：https : //cdn.pixabay.com/photo/2016/10/17/10/52/wind-farm-1747331__340.jpg

我正在尝试使用一个按钮将页面滚动到给定元素id.我目前有这个小提琴,但我想有点不同:

1. 滚动,直到蓝色div(#three)的底部位于页面底部,而不是顶部div滚动到页面顶部.
2. 仅在屏幕上看不到用户的元素时才滚动.

如何才能做到这一点？

HTML

<button id="btn">CLICK</button>
<div class="test" id="one"></div>
<div class="test" id="two"></div>
<div class="test" id="three"></div>
<div class="test" id="four"></div>

CSS

.test {
    width: 100%;
    height: 400px;
}

#one { background: red; }

#two { background: green; }

#three { background: blue; }

#four { background: yellow; }

JS

$("#btn").click(function() {
    $('html, body').animate({
        scrollTop: $("#three").offset().top
    }, 500);
});

继电器光标连接规范说：

hasNextPage如果客户端不使用 分页first，或者客户端使用 分页first，并且服务器已确定客户端已到达由其光标定义的边集的末尾，则将为 false。

我从该规范中了解到，Relay 只能在一个方向上分页；向前或向后。这对于无限滚动分页实现来说似乎是合理的。

但是，如何实现类似于 stackoverflow 问题页面的顺序页面导航，可以双向导航呢？

Relay.js适合这种分页吗？我不能依赖hasNextPage和hasPreviousPage字段，除非我分页first，否则它永远不会有真正的价值last，这也是非常令人沮丧的。

我正在写一个React-on-Rails(第5版)应用程序并遇到了问题.当我访问路径时accounts/:account_id/letters/new,React-Router正在安装EmailShowComponent,当我想要它安装时EmailSendComponent.

这是我的app.js文件:

<Router history={browserHistory}>
  <Route path="/accounts/:id" component={AccountShowContainer} />
  <Route path="/accounts/:account_id/letters/:id" component={EmailShowComponent} />
  <Route path="/accounts/:account_id/letters/new" component={EmailSendComponent} />
</Router>

这是我的main.js文件:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

$(function(){
ReactDOM.render(
  <App />,
  document.getElementById('app')
  )
});

我"<div id="app">"在每个相关的html页面中都放置了标签,为路由器生成这些路径.

知道是什么原因引起的吗？

我在gh页上托管我的React项目时遇到问题。我在github上有我 的仓库----> GitHub仓库我的页面返回自述文件而不是indx.html（public / index.html）。---> 我的页面

我应如何使用我的React应用程序正确处理我的页面？

我有许多的div <p>和<span>内，是否有如何创建一个显示更多/更少与ReactJS按钮来调整一个div的大小任何的例子吗？

我尝试安装npm阅读更多内容，并安装了npm truncate，但似乎无法解决我的问题。因为我必须调整React的div大小和按钮中的文本。

谢谢！

我想在JSX中重复一个图像元素,我需要的代码如下所示:

<View>
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
  <Image source={require('../images/image.png')} />
</View>

我如何使用循环生成此代码？

我正在尝试创建一个画廊页面作为缩略图列表.单击缩略图时,相关图片将以"弹出窗口"显示,-div显示图像的完整大小.

我遇到的问题是将div放在屏幕上.每张图片都有不同的尺寸.

如何用javascript/jQuery做到这一点？

JSFiddle:http://jsfiddle.net/29bo2k9q/

HTML:

<div id="pic1" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-
xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302"/></div>
<div id="pic2" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335"/></div>
<div id="fade" class="black_overlay"></div>
<div id="wrapper">
    <section id="gallery">
        <ul>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic2').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
        </ul>
    </section>
</div>

CSS:

    #gallery {
    text-align: center;
    width: 100%;
}

#gallery ul{
    display: block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: inline-block;
    vertical-align: top;
    background-position: center;
    background-size: cover;
    background-repeat: …

我想知道为什么每个人在制作菜单时都使用无序列表？项目可以是具有inline-block显示属性的块（对于水平菜单）。菜单使用ul和标签有什么理由吗？li