相关疑难解决方法(0)

在我正在合作的项目中,我们有两种选择,我们可以使用哪个模块系统:

1. 使用require和导出模块,并使用module.exports和导出exports.foo.
2. 使用ES6导入模块import,并使用ES6导出export

使用一个优于另一个是否有任何性能优势？如果我们使用ES6模块而不是Node模块,还有什么我们应该知道的吗？

我的反应项目中的图像存在问题.事实上,我一直认为src属性的相对路径是建立在文件架构上的

这是我的文件架构:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

但是我意识到路径是建立在URL上的.在我的一个组件中(例如到file1.jsx)我有这个:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

怎么可能解决这个问题？我希望在react-router处理的任何形式的路由中,所有图像都可以用相同的路径显示.

我正在构建一个小型反应应用程序,我的本地图像将无法加载.像placehold.it/200x200这样的图像加载.我想也许它可能是服务器的东西？github上的完整源代码.

这是我的App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzd?lání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history …

我正在使用react-hot-loader,我对它的示例代码非常困惑:

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './containers/App'

ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => {
    const NextApp = require('./containers/App').default;
    ReactDOM.render(
      <AppContainer>
        <NextApp/>
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

我不明白的是:

a)为什么我需要使用App和NextApp？是不App一样的NextApp,因为它们是从同一个文件导入的？

b)我认为最好的做法是保持requires代码的开头.但我已经import App from '../containers/App'.所以:

import App from './containers/App'
const NextApp = require('./containers/App').default;

不应该App和NextApp是一样的吗？

c)要完成,以下代码行是否等效？使用纯粹require …

我在我的小学习 NextJS 和 TypeScript 项目的界面上遇到了困难。我以为我已经解决了这个问题，但是当涉及到我的组件src上的 prop时，我正在处理 Header.tsx 上的问题Header。我不断收到以下错误消息

类型“StaticImageData”不可分配给类型“string”。预期的类型来自属性“src”，该属性在类型“IntrinsicAttributes & ILogo & {children?: ReactNode;”上声明。}'

我仍然对理解儿童道具以及如何使它们从父母流向孩子充满信心，这使得这样的错误有点令人沮丧。

我已经在下面发布了脚趾代码，并欢迎提出建议，以解决眼前的问题，以及将来缓解此问题的方法。

标头.tsx

import React from "react";
import Navbar from "./Navbar/Navbar";
import Logo from "../Logo";
import companyLogo from "../../../public/assets/images/logo.png";
import { ILogo } from "../../types/headerType";

const Header = () => {
  return (
    <div className="container flex justify-between h-16 max-w-full bg-pink-400 h-100px">
      <Logo className="object-cover" src={companyLogo} />
      <Navbar />
    </div>
  );
};

export default Header;

标志.tsx

import Image from "next/image";
import Link from "next/link"; …

我正在尝试构建一个反应应用程序，我必须使用多个图像，现在我必须导入我将使用的每个图像，例如：

import image from '/img/img1.png';

<img src={img} />

或者还有其他方法吗？？？，

PS：我尝试过“require”，它也给出了一个错误：

<img src={windows.location.origin +'/img/img1.png'}/>

没有输出

I have an Articles component that shows a blog page with listed articles.

render() {
    const articles = {
        ...this.state.articles
    }

    const article = Object.keys(articles).map(cur => {
        return <Article
            key={this.state.articles[cur].id}
            imgName={this.state.articles[cur].thumb}
            title={this.state.articles[cur].title}
            meta={this.state.articles[cur].meta}
            clicked={() => this.detailedHandler(this.state.articles[cur].id)}
            detailed={this.state.articles[cur].detailed} />
    });

As you can see I pass image name with props to Article component. I want then to display the appropriate image for each article.

How do I import an image in Article component based on the props I receive (props.imgName) from …