小编Ami*_*aie的帖子

我有一个 webpack 配置文件和一个像这样的图像的示例测试：

   module: {
       rules : [
           test : /\.(jp?g|png|gif)$/,
           'file-loader?name=[name].[ext]&outputPath=images/'
       ]
   }

我有一个像这样的简单文件结构：

/ src
    / img (1.jpg,2.jpg....)
    / css (a.css,b.css....)
    a bunch of html files

现在，当我在 css 文件中引用图像时，我会写一些类似 url('../img/1.jpg) 的内容，因为我需要上一级并进入 img 文件夹，当我在 html 中包含图像时，我需要使用这样的东西： <img data-id="1" src="<%= require('./img/1.jpg') %>" />.

当我运行 webpack 时一切正常，但在最终的 css 文件中没有正确配置路径！我得到这样的东西：

  background: url(src/img/5.jpg); 

但应该是

 background: url(../src/img/5.jpg);

因为生成的 css 文件将在一个 css 文件夹中

换句话说，最终的 css 文件进入一个子文件夹，所以里面的图像引用都应该得到一个 '../' 但他们没有

我希望我足够清楚

我需要启动一个 React 应用程序，我需要预渲染和路由，所以我安装了 react-snap 和 react-router。（react-router 执行路由，react-snap 显然用于预渲染）。

使用“npm start”在本地一切正常，但是当我进行生产构建并为其提供服务时，路由链接使页面重定向到新的 url，所以我总是看到主页。

我的渲染看起来像这样：

 render() {
    return (
      <Router>
        <React.Fragment>
          <MainNav/>
          <Route exact path="/" component={Home}/>
          <Route path="/greeting/:name/:surname" render={(props) => <Greetings text="Hello, " {...props} />} />
          <Route path="/About" component={About}/>
        </React.Fragment>
      </Router>
    );
  }

这是 react-snap 建议的我的 index.js

import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else { …

我有这个对象文字

let p = {
    name : 'Amir',
    say: () => {
        console.log(this.name)
        console.log(this)
    }
}

我希望 say 函数可以使用这个

p.say();

但箭头函数显然将窗口对象作为'this'. 我知道我可以使用常规函数'say'代替箭头，它会正常工作。

但是我只想更改对 say 函数的调用以使其工作，但绑定不起作用。我的意思是像p.say.bind(p)() 或p.say.call(p)不会按预期工作。是否可以仅更改对函数的调用而不是对 say 函数的调用？

我是钩子的新手。所以这可能很容易，但我不知道如何解决：

我有一个这样的函数，它需要两个数组columns和data. 并且这些数据应该被记住，否则它不起作用。（由 react-table 人员推荐）

function ReactTable(props) {

    const columns = React.useMemo(() => props.columns, [])

    const data = React.useMemo(() => props.data, [])

    return <Table columns={columns} data={data} />
}

这工作正常，但是当道具发生变化时（比如从数据数组中添加或删除一个项目），React.useMemo 不会将更新的数据发送到 Table 组件。我该如何解决这个问题:(

我知道有些反应但我陷入了一种奇怪的境地.

我有两个输入和一个按钮,当两个输入都不为空时,应该启用该按钮.所以,我为每个输入值使用了一个state属性,还有一个属性告诉我两个输入是否都有值:

this.state = {
  title: '',
  time :'', 
  enabled : false
}

我也有一个onChange为每个输入相应地设置状态:

<input type="text" id="time" name="time" onChange={this.onChange.bind(this)} value={this.state.time}></input>
<input type="text" id="title" name="title" onChange={this.onChange.bind(this)} value={this.state.title}></input>

而onChange就是这样的

onChange(e){
    this.setState({
        [e.target.id] : e.target.value,
        enabled : ( (this.state.title==='' || this.state.time==='' ) ? false : true)
      });
  }

问题是setState查看先前的状态,并且启用总是落后一步,所以如果我先输入X,第二次输入Y,那么启用的结果仍为false.

我设法通过使用setTimeout并在其中使用第二行来解决它,但它看起来不对我.

  onChange(e){

    this.setState({
        [e.target.id] : e.target.value,
    });

    setTimeout(() => {
      this.setState({
        enabled : ( (this.state.title==='' || this.state.time==='' ) ? false : true)
    });
    }, 0);

  }

更好的解决方案？

我有几个这样的导航链接：

<NavLink to="/dashboard" >
    <i className="icon icon-home-icon-01"></i>
</NavLink>
<NavLink to="/searchplatform" >
    <i className="icon icon-search-icon-01"></i>
</NavLink>
<NavLink to="/boxes" >
    <i className="icon icon-line-state-01""></i>
</NavLink>

我希望第二个 Navlink 在两条路线上处于活动状态，/searchplatform并且/search/results.

而且，不，我不想有两个NavLinks明显不同的！

确实谢谢

我有一个组件，它从两个或三个 API 接收新闻列表。组件第一次渲染时，将调用 api 并以componentDidMount 如下方式渲染数据：

componentDidMount() {
        this.state.platforms.forEach((platform, i) => {
            let objToSend = {
                phrase: this.props.searchParams.phrase,
                // this is the main place when input data changes
                ...this.props.searchParams.general_params,
                ...this.props.searchParams.platforms[i].api_params,
                stringPath: platform,
                apiPath: this.props.searchParams.platforms[i].apiPath,
            }
            this.props.loadData(objToSend)
            // this is the api call using redux which sends data as props to this component
 }

new 当短语更改时，我希望此组件重新渲染并重新运行 componentDidMount，但它不起作用，因为 componentDidMount 将运行一次。所以我使用了componentDidUpdate，但是由于有很多调用，所以api正在不断更新。

每次更改短语时，如何使组件重新渲染并重新运行 componentDidMount

我有一个像这样的 json 文件：

{
  items: [
    {
       FullImage: "87acaed5c90d.jpg",
       Title: "sometext",
       description: "<p id="imagenews"><img src='something'></p>" ,
    }
  ]
}

如何将描述作为 html 插入到 div 中？我试过

<div>{{description}}</div> 

但它被视为普通字符串。

我的React项目中有一个数组.就像是 :

state = {
   cats : [
      {cid : 1 , value : 1}
      {cid : 2 , value : 3}
      {cid : 3 , value : 4}
   ],
   curpage : 3
}

现在我想要的是用destructring 获取nth item数组cats.我试过了

const { cat : {cats[id]} } = this.state;

要么

 const { cats[id] } = this.state;

我有一个组件，它接收一堆值作为 props，其中有一个带有字符串值的 prop，它定义了“要返回的输出 html”的类型。

像这样的东西，这当然是错误的

const WithScrollingText = ({text,boxWidth,tag}) => {
    return boxWidth > 100
    ?   <tag>{text}</tag>
    :   <div className="with-scrolling-text"><div>{text}</div></div>
}

我会像这样调用/使用这个组件：

<WithScrollingText text="Something" boxWidth={250} tag="span"/>
<WithScrollingText text="Something else" boxWidth={250} tag="div"/>

等等

如何修复渲染，以便当我将“span”发送到组件时，它会渲染并返回一个跨度

我是sql的新手.我必须选择销量最高的前3家公司

公司表:CompanyId,Compnayname等

订单表:OrderId,companyId,价格等

选择前三名公司名称(从ordes中选择总和(价格))作为最大公司订单的最大描述？

我想我需要加入这些但我无法找到解决方法