小编Nul*_*rue的帖子

采用 IP 地址的输入字段的最佳做法是什么？

即：数字和点。

我最初选择了type='number'，但是，我注意到只要我输入第二个点.和下一个数字，我的提交按钮就会被禁用。

例如：123.124.4（boom！按钮被禁用）

以上是由于小数点考虑type=number吗？

<input type="number" class="input-box" placeholder="xxx.xxx.xxx.xx" autocomplete="off" />

有没有办法摆脱这个而不去<input type='text'/>？

在 React 应用程序中，如何将 CSS 样式应用于 iframe 加载的 src 内容？

我有一个加载外部内容的应用程序，但样式确实过时了，我想覆盖它。

示例波纹管：（请注意，我用一些虚拟数据替换了 , 的src内容<iframe/>，但是，问题仍然相同。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Frame extends React.Component {
  componentDidMount() {
    document
      .querySelector("iframe")
      .contentWindow.document.querySelector("h1#firstHeading").style.color =
      "red";
  }
  render() {
    return (
      <iframe
        title="How Can I overwrite the styles from the src content?"
        src="https://en.wikipedia.org/wiki/Herbie_Hancock"
        width="90%"
        height="500px"
        scrolling="no"
      />
    );
  }
}


function App() {
  return (
    <div className="App">
      <Frame />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App …

我花了几个小时试图为使用create-react-app创建的TypeScript项目启用linting。

• 该wmonk /创建反应的-APP-打字稿回购现在已经过时
• 因此，我遵循了CRA文档中的这些说明

问题是上面建议的实现不会在新创建的项目中添加任何棉绒。

到目前为止，我已经尝试过：

• 安装TypeScript TSLint插件作为VSCode的扩展
• tslint.json使用以下配置在我的项目上创建文件：

  {
    "rules": {
      "no-debugger": false,
      "no-console": false,
      "interface-name": false
    },
    "linterOptions": {
      "exclude": [
        "config/**/*.js", "node_modules/**/*.ts", "coverage/lcov-report/*.js"
      ]
    },
    "extends": [
      "tslint:recommended", 
      "tslint-react", 
      "tslint-config-prettier"
    ]
  }

• 添加一个皮棉脚本到我的package.json

 "scripts": { 
     "lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose"
 }

然后，我尝试运行，yarn lint or npm run lint但以上任何方法均未删除任何文件

这是我的package.json文件：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": …

我知道样式可以有条件地呈现，例如：

const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
  display: ${({ centered }) => (centered ? "block" : "flex")};;
  margin: ${({ centered }) => (centered ? "auto 0" : "unset")};
  padding: ${({ centered }) => (centered ? "0 15px" : "unset")};
`;

这看起来并不 DRY - 我如何（是否可能）基于 props渲染整个css 样式块？

就像是：

const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
   if (centered) {
    display: "block" ;
    margin: $"auto 0";
     padding: "0 15px" ;
   } else {
     ......
   }
`;

在这里学习 ExpressJS。我有get一条需要查询参数的路线，即

app.get('/api', (req, res) => {
  res.send({ name: req.query.name, age: req.query.age, club: req.query.club })
})

在邮递员以下 http://localhost:5000/api?name=Messi&age=31&club=Barcelona

使用 res.body 返回 200 为：

{
    "name": "Messi",
    "age": "31",
    "club": "Barcelona"
}

题

我如何编写自定义验证，其中：

• 如果请求的查询参数不存在：状态 400
• 如果缺少任何参数，即（姓名、年龄、俱乐部）返回响应，说明需要缺少的参数（姓名、年龄和/或年龄）

是否有任何资源显示带有 react-leaflet 的搜索框实现？

我想让我的地图图钉填充搜索结果，以查询和检索我的现有数据。

IE：

const names = [

  {name: 'Joe', location: '40.734621, -73.989341 '},
  {name: 'Seth', location: '45.77621, -73.789654 '},

]

然后，在搜索 Joe 或 Seth 之后，地图将填充位置坐标。

我找到了 Leaflet.js 的例子，但找不到任何用 react-leaflet 旋转的例子。

您能否推荐一个在使用基本 HTML 和 CSS 时实际提供边缘滑动功能的 JS 库？

我已经搜索了所有内容，但没有找到该问题的真实来源。我见过很多支持滑动手势但不支持边缘滑动的库。

我的最后一次尝试是使用Hammer.js，我尝试将其实现为：

var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    var endPoint = e.pointers[0].pageX;
    var distance = e.distance;
    var origin = endPoint - distance;

    //swipe right to open nav
    if (origin <= 15 && e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
    } else {
        // close/hide menu(s)
        $('#navigation-menu').animate({
            left: '-100%'
        });
    }
}); …

你能帮我理解正确的修复是 React Router 还是 React 相关的吗？

我希望能够在每次用户再次访问同一条路线时重置状态（不确定这是否是正确的术语）。

我有一个原型可以检查给定汽车的正确颜色或正确成本。

正如您将在下面看到的，我的问题是每次我都使用相同的路线和/或我的随机播放方法。我的控制显示/隐藏和颜色状态的列表不会自行重置。

我有单独的路由渲染<Cost/>和<Color/>组件

export const Routes = ({ state, shuffle }) => (
  <Switch>
    <Route
      path="/car-cost"
      render={() => <Cost {...state} shuffle={shuffle} />}
    />
    <Route
      path="/car-color"
      render={() => <Color {...state} shuffle={shuffle} />}
    />
  </Switch>
);

然后我将路由传递到我的主要父组件中。IE：

// MAIN PARENT COMPONENT
export default class Dealership extends Component {
  state = {
    cars: [
      { name: "Ferrari", cost: "$9.000", color: "red", …

好吧，如果我有一个反应组件，我可以：

const Home = () => (....)
export default Home;

现在我有一个名为的文件About.js，我在其中导出相关的多个组件。

export const Staff = () => (...)

export const Employee = () => (...)

在我的 App.js 中

import { Staff, Employee } from "./components/About";

然而，所有的工作，react dev-tools 说上面的组件是 <Unknown/>

从避免<Unknown/>输出的文件中导出多个组件的最佳做法是什么？

解决方案 感谢@Khun 对下面的评论

About.js

const Staff = () => (...)
const Employee = () => (...)

export {Staff, Employee}

in my App.js

    import { Staff, Employee } from "./components/About";

这删除了<Unknown/>from react 开发工具。

Ps：我理解最佳实践的差异，但是，这确实解决了我上面的问题。

我用Reactapp 打了一个兔子洞.我looping通过这个对象数组:

const weeklyClasses = [
  {
    id: 1,
    day: "Monday",
    classDescription: [
      { classType: "11am-12pm Jazz", teacher: "Joe" },
      { classType: "1pm-2pm Blues", teacher: "Doe" },
      { classType: "3pm-4pm Samba", teacher: "Zen" }
    ]
  },
  {
    id: 1,
    day: "Tuesday",
    classDescription: [
      { classType: "11am-12pm Rock", teacher: "Sis" },
      { classType: "1pm-2pm Tango", teacher: "Ter" },
      { classType: "3pm-4pm Salsa", teacher: "Soul" }
    ]
  },
  // ...
];

我正在循环并检索所需的值,但是,当前classType输出为一个p

const Data = …