小编Hyr*_*ule的帖子

我的/ About中有一个带有Routes的子菜单.
此子菜单名为AboutMenu,出现在/ About like =>/About/Company和/ About/Info下的所有页面上.

一个锻炼的例子显示 <Route component={AboutMenu} />有activeStyle={match.isExact && selectedStyle}>和我只是用<AboutMenu />,并添加exact到我的AboutMenu链接,而不是.

为什么要使用<Route component={AboutMenu} />而不仅仅是渲染<AboutMenu />？

export const AboutMenu = (props) => {

    return (
        <div>
            <li>
                <NavLink exact to='/About' activeStyle={ activeStyle}> Company </NavLink>
            </li>
            <li>
                <NavLink to='/About/History' activeStyle={activeStyle}> History </NavLink>
            </li>
            <li>
                <NavLink to='/About/Vision' activeStyle={activeStyle}> Vision </NavLink>
            </li>
        </div>
    )
}

关于部分

const About = (props) => {

    return(
        <Template>
            <AboutMenu />
            {/* OR <Route component={AboutMenu} …

我有一个看起来像这样的对象:

const object = {
head: 1,
eyes: 2,
arms: 2,
legs: 3
}

我想循环遍历此对象,并注销每个键名称,例如eyes值的数量.

这将导致:

head
eyes
eyes
arms
arms 
legs 
legs
legs

目前我有这个解决方案,但感觉它可以做得更整齐和可读.

Object.keys(object)
  .map(key => {
    return [...Array(object[key])].map( (_, i) => {
      return console.log(key)
   })

有什么建议？

我正在运行一个 express 和 create-react-app 应用程序。它们在开发过程中是独立的实体，而 express 只是我们通过 package.json 中的 'proxy' 字段进行通信的一个端点proxy: 'http://localhost:5000。在生产过程中，我yarn build通过 Express 中的 catch-all-route运行并提供 build 文件夹中的静态 index.html。

// RENDER REACT STATIC INDEX.HTML FROM BUILD
if(process.env.NODE_ENV === 'production') {
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'))
  })
}

好吧，在生产和开发过程中存在巨大差异。例如，如果我在 期间导航到 /pages/plainhtmlfile production，如果路由匹配，我可以提供 .EJS 文件。因为在生产过程中只有 Express 运行，它提供静态文件，包括 React 构建文件夹 index.html。

//THIS WORKS DURING PRODUCTION, NOT WORKING DURING DEVELOPMENT.
app.get('/plainhtmlfile', (req, res) => {
  res.render('nonreactpage')
})

如何在可以提供“/plainthtmlfile”的地方进行开发？现在 create-react-app 是一个单独的进程，在开发过程中运行在端口 3000 和快速端口 5000 上。

我正在尝试将提交功能添加到我的语义用户界面反应搜索组件中，但是它并没有达到我想要的方式。

提交者应该对api进行ajax调用并注销数据。

有谁知道如何使它工作？我收到错误消息，或者即使我在输入字段中写了一些内容，我的ajax请求搜索查询也最终为空。

import React, {Component} from 'react'
import { Container, Header, Search } from 'semantic-ui-react'

import './jumbotron.css'


class Jumbotron extends Component {
constructor(props) {
    super(props)

    this.state = {value: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({value: event.target.value})
  }

  handleSubmit(event) {
    const food = this.state.value;
    const url = `https://api.edamam.com/search?q=${food}&app_id=${appId}&app_key=${apiKey}`

    fetch(url).then( response => response.json())
    .then( data => console.log(data))

    event.preventDefault();
  }


    render() {
        return (
            <Container text>
                <Header>
                    Nutrion
                </Header>
                <form onSubmit={this.handleSubmit}>
                <Search
                onChange={this.handleChange}
                type='text'
                value={this.state.value} 
                size='big'
                placeholder=' ...'/> …

我的应用程序中有一个响应式flexbox框，其中包含动态呈现的卡片（每个api调用呈现1-10张卡片）。它几乎可以完全满足我的要求，除了它的包装方式。

假设我渲染了10张卡片，如果我调整屏幕大小，使其变成例如4-4-2，则最后两张卡片居中，我希望将其包裹起来，以便最后两张卡片从左侧开始并以相等的间距从上面的卡片开始。你该怎么做？

编辑以进一步阐述：假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1，卡片应居中显示，我仍然需要居中，但我希望最后2张如果卡变成4-4-2或3-3-2等，则从左侧缠绕卡。

https://codepen.io/hyrosian/pen/EXKZJz

.card {
    text-align: center;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    max-width: 300px;
    margin: 2rem;
    padding-bottom: 1rem;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}

<div class="container">
  <div class="recipe-grid">
    
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - …

为什么价差运营商会在这里用'HB woodlawn'取代'Stratford'的价值？这是如何运作的？

const editName = (oldName, name, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      return {
        ...item,
        name
      }
    } else {
      return item
    }
  })

let schools = [
  { name: "Yorktown"},
  { name: "Stratford" },
  { name: "Washington & Lee"},
  { name: "Wakefield"}
]
let updatedSchools = editName("Stratford", "HB Woodlawn", schools)
console.log( updatedSchools[1] ) // { name: "HB Woodlawn" }
console.log( schools[1] ) // { name: "Stratford" },

我有一个简单的功能,检查数字是否为正数.我希望它抛出异常,如果a < 0

function isPositive(a) {
  try{
    switch(a) {
      case a < 0:
      throw 'Too small';
    }
  }
  catch(e) {
    console.log(e)
  }
}
isPositive(-3)