标签: react-starter-kit

我不确定如何从中获取值

<FormattedMessage {...messages.placeholderIntlText} />

像输入一样占位符格式:

<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />

因为它会在实际占位符中返回[Object object].有没有办法获得实际的正确值？

在同构反应应用程序中我myModule应该在节点和浏览器环境中表现不同.我想配置此分割点的package.json用于myModule:

package.json

{
  "private": true,
  "name": "myModule",
  "main": "./myModule.server.js",
  "browser": "./myModule.client.js"
}

file structure

??? myModule
?   ??? myModule.client.js
?   ??? myModule.server.js
?   ??? package.json
? 
??? browser.js
??? server.js

因此,当我myModule在节点中使用时,我应该只得到myModule.server.js:

server.js

import myModule from './myModule';
myModule(); // invoke myModule.server.js

在浏览器端应该只使用 myModule.client.js以下内容构建bundle:

browser.js

import myModule from './myModule';
myModule(); // invoke myModule.client.js

react-starter-kit使用这种方法,但我无法弄清楚这个配置的定义.

动机

1. package.json 做这种分裂是很好的语义点.
2. 客户端包仅包含myModule.client.js.

已知的解决方案 - 不是我的答案 …

使用React Starter Kit,我按如下方式添加Material UI:

npm install material-ui --save

以及导入到组件的以下内容:

import RaisedButton from 'material-ui/lib/raised-button';

和:

<RaisedButton label="Default" />

我收到以下错误:

警告:Material-UI:应在muiTheme上下文中提供userAgent以进行服务器端呈现.

根据Material UI的文档,它说我需要解决三件事:

1. autoprefixer和用户代理
2. process.env.NODE_ENV

我应该输入什么代码以及确切的位置,特别是React Starter Kit？

PS 此解决方案对我不起作用: - /

我从react-starter-kit项目中创建了一个新路由,它对一些数据进行异步提取,然后呈现它,但是一秒钟之后页面重新加载,并显示"找不到页面 - 抱歉,但页面是你的"试图查看不存在".

在控制台中,我看到 - "警告:文本内容不匹配.服务器:"余额"客户端:"找不到页面"

async function action() {

let bittrex = new ccxt.bittrex ({
    'apiKey': '',
    'secret': ''
})

try {

    // fetch account balance from the exchange
    let bittrexBalance = await bittrex.fetchBalance ()
    /**** commenting above and uncommenting this block stops it from happening.... 
    let bittrexBalance = {};
    bittrexBalance.info= [];
    let currency = {};
    currency.Currency = "BTC";
    currency.Value=999;
    // output the result
    bittrexBalance.info.push(currency);*/
    console.log ('balance', bittrexBalance)

    let balances = [];
    balances.push(bittrexBalance)
    return {
        title: "Balances",
        component: ( …

已解决 --- 请阅读更新 2

你好，我在使用 React-leaflet 地图的 React 入门套件中遇到此错误

它就像 github 模块示例，但我不知道问题是什么！我认为SSR有问题

React 版本：16.x 和 React 入门套件

更新1

ReferenceError: window is not defined
    at D:\project\react-starterkit\node_modules\leaflet\src\core\Util.js:217:24
    at version (D:\project\react-starterkit\node_modules\leaflet\dist\leaflet-src.js:7:65)
    at Object.<anonymous> (D:\project\react-starterkit\node_modules\leaflet\dist\leaflet-src.js:10:2)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\react-starterkit\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)

通过更新反应解决最新版本 16.x

TypeError: (0 , _react.createContext) is not a function
    at Object.<anonymous> (D:\project\react-starterkit\node_modules\react-leaflet\lib\context.js:18:47)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\react-starterkit\node_modules\babel-register\lib\node.js:152:7) …

我在处理图表库时遇到问题。

一步步

1. 创建一个空项目

$ npx create-react-app chart-demo --template typescript

2. 添加记录

$ yarn add @types/recharts

3. 运行项目

$ yarn start

它显示以下错误。

Failed to compile
./src/App.tsx
Module not found: Can't resolve 'recharts' in '\chart-demo\src'

仅供参考，它不仅适用于重新图表，还适用于几个图书馆。幸运的是，我发现胜利图表正在运行

新项目真的很新鲜，只是添加recharts而已。
请帮我弄清楚这个问题。

Package.json

{
  "name": "chart-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/recharts": "^1.8.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts …

查看 react-starter-kit 中的示例代码，我对语句的require.ensure([], (require) => resolve(require('./Admin').default), 'admin');作用感到困惑。我没有看到 require.ensure 在任何地方定义，所以我假设它是一个 webpack 函数。

这是确保用户具有管理员角色的授权检查吗？如果是这样，用户信息和角色信息在哪里被实例化？

是否只是为了确保管理组件被实例化？什么是.default属性，字符串“admin”的用途是什么？

import React from 'react';
import Layout from '../../components/Layout';

const title = 'Admin Page';
const isAdmin = false;

export default {

  path: '/admin',

  async action() {
    if (!isAdmin) {
      return { redirect: '/login' };
    }

    const Admin = await new Promise((resolve) => {
      require.ensure([], (require) => resolve(require('./Admin').default), 'admin');
    });

    return {
      title,
      chunk: 'admin',
      component: <Layout><Admin title={title} /></Layout>,
    };
  },

};

首先，让我说我知道我有一个自定义组件“卡片”，我在其中一个路线“主页”中使用了它。

卡.js

import s from 'Card.css';
class Card {
    ...
    render(){
        return (<div className={cx(className, s.card)}>
            {this.props.children}
        </div>);
    }
}

卡片文件

.card {
    display: block;
}

主页.js

<Card className={s.testCard}>
...
</Card>

主页.css

.testCard { display: none; }

我在这里遇到的一个问题是，即使我将显示设置为无，卡片仍然可见，因为浏览器中的 CSS 顺序似乎是随机的。即使禁用了 Javascript，此顺序也不会改变。

为了让 .testCard 在 .card 之后正确加载，我使用了“composes:”：

主页.css

.testCard {
    composes: card from 'components/Card.css';
    display: none;
}

显然这会导致 css-loader 识别 .testCard 应该在 .card 之后加载。除了，如果我禁用 Javascript，页面将恢复到旧行为：.card 在 .testCard 之后加载，它再次变得可见。

让我们的页面优先考虑 .testCard 而不是在启用或不启用 Javascript 的情况下行为一致的卡片的推荐方法是什么？

我重新加载动态页面时收到此错误.

错误:无法在Object.didPutListener(SimpleEventPlugin.js:210)的Object.getNodeFromInstance(ReactDOMComponentTree.js:172)的precacheChildNodes(ReactDOMComponentTree.js:96)处找到ID为275的元素.在invariant(invariant.js:38)处.位于Object.putListener(EventPluginHub.js:143)的Object.putListener(ReactDOMComponent.js:176)位于ReactReconcileTransaction.close(ReactReconcileTransaction.js:80)的ReactReconcileTransaction.closeAll(事务处)的CallbackQueue.notifyAll(CallbackQueue.js:76) .js:206)在ReactReconcileTransaction.perform(Transaction.js:153)

和

未捕获(在promise中)TypeError:无法在Object.willDeleteListener(SimpleEventPlugin.js:220)处的Object.deleteAllListeners(EventPluginHub.js:201)处读取未定义的属性'remove',位于对象的ReactDOMComponent.unmountComponent(ReactDOMComponent.js:976)位于ReactDOMComponent.unmountChildren(ReactMultiChild.js)的Object.unmountChildren(ReactChconciler.js:146)处的Object.unmountComponent(ReactReconciler.js:79)处的ReactCompositeComponentWrapper.unmountComponent(ReactCompositeComponent.js:418)处的.unmountComponent(ReactReconciler.js:79) :373)在Object.unmountComponent的ReactDOMComponent.unmountComponent(ReactDOMComponent.js:974)(ReactReconciler.js:79)

在这个动态页面中,我有一个原始的html,我用@gallery {Id} @替换了部件react-image-gallery.我不能解决问题,因为在动态路径中,我有2个画廊,它运行良好,服务器端导航和重新加载页面.但是在使用相同动态组件的特定动态路径中,我只在重新加载时才会出现此错误,这意味着如果复制链接并粘贴它以立即访问此页面,我会收到此错误.通过使用检查我看到

<div data-reactid="274">  // this is item in children
     <p>............</p>
    <div data-reactid="275"></div>//but this is another item in children that for unknow reason nested in data-reactid="274"
</div>

但我应该看到

<div data-reactid="274"> 
     <p>............</p>
</div>
<div data-reactid="275"></div>

我认为这是因为要添加更多的画廊(更多数据).问题是,当我使用服务器端导航导航时以及当我重新加载页面时,我得到要渲染的对象数组是相同的.我通过这样做获得阵列.

children = parts.map((item, index) => {
        if (typeof item === "string") {
          return <div key={index} dangerouslySetInnerHTML={{ __html: item }} />
        } else {
          return <div key={index}>{item}</div>;
        }
      })