小编Tar*_*kiv的帖子

我正在尝试创建一个以模态显示的表单.因此,当用户输入值时,该值存储在本地存储中.这是一张帮助您了解我的意思的图片:
这是表单的代码:

function FieldGroup({id, label, help, ...props}) {
    return (
        <ReactBootstrap.FormGroup controlId={id}>
            <ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl {...props} />
            {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}
        </ReactBootstrap.FormGroup>
    );
}

const formInstance = (
    <form>
        <FieldGroup
            id="formControlsText"
            type="text"
            label="Text"
            placeholder="Recipe Name"
            inputRef={ref => { this.input = ref; }}
        />
        <ReactBootstrap.FormGroup controlId="formControlsTextarea">
            <ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />
        </ReactBootstrap.FormGroup>
    </form>
);  

正如我在bootstrap React教程中所读到的,我应该添加
<FormControl inputRef={ref => { this.input = ref; }} /> 到FormControl道具中.但添加它后,我调用模态窗体时出错:

`

http://some-address/script.jsx由于MIME类型不匹配(X-Content-Type-Options:nosniff),资源被阻止.
这个问题我在Firefox的控制台中得到了(Chrome似乎并不关心它).这是控制台的屏幕截图:

我搜索了一段时间试图找到如何解决它,但失败了.这是代码的HTML部分.

据我所知,问题是由于type ="text/babel".但如果我将其更改为type ="text/javascript",则Babel不会将脚本转换为ES5.

我正在研究"西蒙游戏"项目.

我想让它以正确的顺序照亮按钮.但到目前为止,代码正常工作,直到第二级.

如果我是对的checkButton(randIndexArr, counter),那么应该包含在承诺中,这样如果counter === index它应该调用checkButton,也许还有一些我错过的错误.

以下是视频的链接:代码如何工作以更加清晰Zipline:构建一个西蒙游戏 ,这是我的代码:

document.addEventListener("DOMContentLoaded", function () {
'use strict';

var checkOn = document.querySelector("input[type=checkbox]");
var gameCount = document.getElementsByClassName("innerCount")[0];
var startButton = document.getElementById("innerStart");
var strictButton = document.getElementById("strictButton");
var strictInd = document.getElementById("strictIndicator");
var strictMode = false;

var soundArray = document.getElementsByTagName("audio");
var buttons = document.querySelectorAll(".bigButton");
var buttonArray = [].slice.call(buttons, 0);

checkOn.addEventListener("change", function () {

    if (checkOn.checked) {
        gameCount.innerHTML = "--";
    } else {
        gameCount.innerHTML = "";
    }
});

strictButton.addEventListener("click", function () { …

我没有使用 SVG 的经验，所以需要一些帮助。我使用 SVG 元素，但路径周围的区域非常大。如何使 svg 区域和路径区域几乎相同。我尝试删除高度，但这并不能解决问题。
这是 chome 检查器中的屏幕截图： svg 的大小为 64px X 128px，但路径的大小约为 22px X 37px PS：实际上我希望图标的大小就像我使用 fontawesome pack 一样：

我不想在 React 中使用 Fontawesome CDN。因此，我使用了https://icomoon.io/app并选择了单独的元素，并希望将其添加到页面，如本文中所示：图标作为 React 组件

这是元素的示例：

<svg width="4em" height="8em" viewBox="0 0 1000 1000">
  
  <path d="M265.143 804.571c0-25.143-20.571-45.714-45.714-45.714s-45.714 20.571-45.714 45.714 20.571 45.714 45.714 45.714 45.714-20.571 45.714-45.714zM384 713.143v-402.286c0-9.714-8.571-18.286-18.286-18.286h-292.571c-9.714 0-18.286 8.571-18.286 18.286v402.286c0 9.714 8.571 18.286 18.286 18.286h292.571c9.714 0 18.286-8.571 18.286-18.286zM274.286 228.571c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143s4 9.143 9.143 9.143h91.429c5.143 0 9.143-4 9.143-9.143zM438.857 219.429v585.143c0 40-33.143 73.143-73.143 73.143h-292.571c-40 0-73.143-33.143-73.143-73.143v-585.143c0-40 …

我在教育项目中使用Reactstrap和React-router 4.0.0-beta.6,它位于带有自定义域的gitlab上.
根据Reactstrap文档:这是我应该使用主动navlink的方式

  import { NavLink } from 'reactstrap'
  ... 
  <NavLink href="#" active = true >Link< /NavLink>

根据React-router v4 docs:

  import { NavLink } from 'react-router-dom'
  ...
  <NavLink to="/about" activeClassName="active">About</NavLink> 

那么我应该如何实现navlink活动状态并使用react-router？

我正在创建多语言应用程序。我正在使用：React Intl; React Router（最新v4）; Redux。
我的应用程序中的路径将取决于语言环境：

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

如果用户拥有locale = en-US并进入localhost:8080应用，则将其重定向到 localhost:8080/en

如果用户拥有locale = uk并进入localhost:8080应用程序，则显示其对应于地址的组件localhost:8080/而不更改位置路径名。

Routers.jsx

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

目前，它无法正常工作。
我no match在航线配置，如果我进入localhost:8080/或localhost:8080/en。

我是React的初学者,我尝试从FreeCodeCamp做一个"Camper Leader Board"项目.在StackOverflow代码片段中它抛出了我:
`"message":"SyntaxError:内联Babel脚本:期望对应的JSX结束标记请帮我找出错误.这是代码:

"use strict";
class TableBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    loadCampersFromServer() {
        fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')//alltime or recent
            .then(
                (response) => {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ${response.status}');
                        return;
                    }
                    response.json().then((data) => {
                        console.log('getting data:', data);
                        this.setState({data: data});

                    })
                }
            )
            .catch(function (err) {
                console.log('Fetch Error :-S', err);
            });
    }

    componentDidMount() {
        this.loadCampersFromServer();
    }

    render() {
        return <CampersList />;
    }
}

class CampersList extends …

我很抱歉我的问题可能是重复到此:
在div内部的Bootstrap固定导航栏 或者这个:
Twitter Bootstrap:如何使顶部固定导航栏留在容器中而不是拉伸？
或许多相似,但三年过去了,Bootstrap几乎将它的版本从第2版更新为第4版,但问题仍然存在.
所以我正在寻找一些优雅而简单的方法来使固定导航栏保持在父母div.container中.
这是我从官方文档中复制和更改的代码:

<div class="container">
    <nav class="navbar navbar-fixed-top navbar-light bg-faded">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" 
            data-target="#navbarResponsive" aria-controls="navbarResponsive" 
            aria-expanded="false" aria-label="Toggle navigation">
        </button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <a class="navbar-brand" href="#">
                <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar
            </a>
            <ul class="nav navbar-nav float-md-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>
</div> 

当我点击“ side panel ”外部时，我需要触发onblur事件，以便在用户点击导航面板外部时关闭面板。 虽然我使用的是 React JS - 但为了简单起见，我已经用纯 JavaScript 编写了示例。最近我写了一些类似的东西，一切正常，但在这种情况下它不起作用，可能是因为位置固定。

var d = document.getElementById("fname");

d.addEventListener("blur", myFunction);

function myFunction() {
  alert("Input field lost focus.");
}
var state = true;

function myFunction2() {
  state = !state;
  if (state) {
    d.className = "header__aside";
  } else {
    d.className += " header__aside--open";
  }

}

.main {
  background-color: violet;
  padding: 50px;
}

.header__aside {
  background-color: #cfcfcf;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  font-size: 1.2rem; …