タグ付けされた質問 「reactjs」

数時間掘り下げた後、次の問題について誰かが助けてくれることを期待して、SOに関する質問をすることに決めました。 Webアプリケーションの1つとして、Reactサポートライブラリと一緒にOnsen UI jsフレームワークを使用しました 開発環境でアプリケーションをレンダリングしようとすると、すべてが正しく機能しているように見えますが、ステージング環境でそれを試みると、一部のコンポーネントの動作が異なります これまでに見つけたもの：ステージング環境では、一部のHTML属性がDOMに別様に設定されているようです： |----------------|---------------|--------------| | HTML attribute | DEV ENV | STAGING ENV | |----------------|---------------|--------------| | fixed-content | fixed-content | fixedcontent | |----------------|---------------|--------------| | active-index | active-index | index | |----------------|---------------|--------------| このため、OnsenフレームワークはHTML要素の属性を見つけることができず、以下に関係なく異なる動作をします。 私たちは同じブラウザーを使用しています（Chrome、Edge、Firefoxで確認） 両方の環境に同じJSコードがロードされています 環境間の違いは何ですか？ JSファイルは、開発マシンとステージング環境のS3にローカルに保存されます。 ステージング環境で暗号化された接続を使用します Accept-Encodingヘッダーはgzip, deflateローカルとgzip, deflate, brステージングにあります たぶん何か他に探す必要がありますか？ ここで何が起こっているのか誰か知っていますか？

8 javascript  html  reactjs  onsen-ui 

私のjest設定を自分のpackage.jsonから移動したいのですが、ここで提案されているように--configを使用しようとしていますが、エラーが発生しますargv.config.match is not a function package.json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --config jest.config.js", "eject": "react-scripts eject", }, cli hutber@hutber-mac:/var/www/management/node$ npm test -u > management-fresh@0.1.0 test /var/www/management/node > react-scripts test --config jest.config.js Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern] argv.config.match is not a function npm ERR! Test failed. …

8 javascript  reactjs  testing  jestjs  create-react-app 

私使用していますが、コンポーネント遅延ロードとしてのWebPACKを使用してルータに反応バンドラ私がホームページにアクセスすると、/ 私はそれをネットワーク]タブで見ることができる bundle.jsロードされ、また、私は、サイドバーの対応コンポーネントで特定のアイテムをクリックしたときたとえば0.bundle.js、ファイル名が正常に読み込まれますが、検索バーからネストされたルート（例http://127.0.0.1:8080/forms/select）に直接移動すると、次のようなエラーが発生します。 GET http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404（見つかりません） このエラーは、bundle.jsがロードされていないことを示しています。つまり、他のチャンクをロードできません。 webpack.config.js const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [], }, resolve: { extensions: ['*', '.js', '.jsx'], }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js', }, plugins: [new webpack.HotModuleReplacementPlugin()], devtool: 'cheap-module-eval-source-map', devServer: { contentBase: …

8 javascript  reactjs  webpack  react-router  lazy-loading 

私の新しい反応Webアプリにこの暗いテーマを使用したい：https : //github.com/ant-design/ant-design-dark-theme ここでテーマをカスタマイズする手順と、README でテーマを適用する手順を実行すると、config-overrides.jsは次のようになります。 const { darkTheme } = require('@ant-design/dark-theme'); const { override, fixBabelImports, addLessLoader } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: darkTheme }), ); これは機能していないようです。たとえば、Menu antdコンポーネントがまだ「暗い」テーマではなく「明るい」テーマで表示されています。 明示的に設定せずに、すべてのantdコンポーネントをダークテーマでレンダリングしたいのですが。それは可能ですか？はいの場合、私は何が間違っていますか？ ここではフロントエンドの開発者ではないので、明らかなものがない場合はお知らせください。

8 reactjs  less  antd 

AntDメニューサイダーをタブパネルのように使用しようとしています。 コンテンツ内にコンポーネントを配置して、メニュー項目がクリックされたときにコンテンツパネルが関連するコンポーネントをレンダリングするようにします。 この構造を取得して、各メニュー項目のコンテンツとしてコンポーネントを取得するにはどうすればよいですか？ import React from 'react'; import { compose } from 'recompose'; import { Divider, Layout, Card, Tabs, Typography, Menu, Breadcrumb, Icon } from 'antd'; import { PasswordForgetForm } from '../Auth/Password/Forgot'; const { Title } = Typography const { TabPane } = Tabs; const { Header, Content, Footer, Sider …

8 javascript  reactjs  react-router-dom  antd 

テキストフィールドとボタンを備えた非常にシンプルなコンポーネントがあります。 入力としてリストを受け取り、ユーザーがリストを循環できるようにします。 コンポーネントには次のコードがあります。 import * as React from "react"; import {Button} from "@material-ui/core"; interface Props { names: string[] } interface State { currentNameIndex: number } export class NameCarousel extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { currentNameIndex: 0} } render() { const name = this.props.names[this.state.currentNameIndex].toUpperCase() return ( …

8 javascript  reactjs  typescript 

私は、Reactフレームワークを使用するJavaScriptレガシープロジェクトを使用しています。まったく異なるTypeScript Reactプロジェクトで再利用したいReactコンポーネントがいくつか定義されています。 JS Reactコンポーネントは、controls.jsxファイルで定義され、次のようになります。 export class MyComponent extends React.Component { render() { return <h1>Hi from MyComponent! Message provided: {this.props.message}</h1>; } } 私のTypeScript Reactプロジェクトでは、次のように使用しようとしています。 import * as React from "react"; import * as ReactDOM from "react-dom"; import { MyComponent } from "../JavaScriptProject/controls"; ReactDOM.render( <MyComponent message="some nice message"/>, document.getElementById("documents-tree") ); しかし、次のエラーが発生します。 エラーメッセージは言う： …

8 javascript  node.js  reactjs  typescript  single-page-application 

親コンテナー上でマウスオーバーするとアクティブになるスクリプトを作成し、その子要素をマウスから離す必要があります。私は現在それを機能させていますが、コードのいくつかの部分は、REACTコードがどのように見えるべきかと矛盾しているようです。特に2つの部分。 レンダー関数でカウンターを使用して、各スパンが正しいカスタムプロパティを取得できるようにしています。state.customPropertiesこれは、親要素のマウスオーバー時にカスタムプロパティを更新する配列です。 render() { let counter = 0; const returnCustomProp = function(that) { counter++; let x = 0; if (that.state.customProperties[counter - 1]) { x = that.state.customProperties[counter - 1].x; } let y = 0; if (that.state.customProperties[counter - 1]) { y = that.state.customProperties[counter - 1].y; } return "customProperty(" + x + " …

8 reactjs  dom 

小道具を介して受信した配列に基づいて子のコレクションをレンダリングする親コンポーネントがあります。 import React from 'react'; import PropTypes from 'prop-types'; import shortid from 'shortid'; import { Content } from 'components-lib'; import Child from '../Child'; const Parent = props => { const { items } = props; return ( <Content layout='vflex' padding='s'> {items.map(parameter => ( <Child parameter={parameter} key={shortid.generate()} /> ))} </Content> ); …

8 reactjs 

@keyframeを使用してCSSでアニメーションを使用する方法を学びました。しかし、私のカスタムアニメーションコードを自分のreactプロジェクト（materialUIを使用）に書きたいと思います。私の課題は、MaterialUIのmakeStyle（）を使用して、アニメーションをカスタム化するJavaScriptコードをどのように書くことができるかです。今回は、MaterialUIで遷移プロセスをパーセンテージでカスタマイズできるようにしたいと思います。makeStyle（）でこのようなコードを記述できるようにする必要がありますが、その方法がわかりません。 @keyframes myEffect { 0%{ opacity:0; transform: translateY(-200%); } 100% { opacity:1; transform: translateY(0); } } コードスニペットを実行する結果を非表示スニペットを展開

8 css  reactjs  material-ui  jss 

Open Dataからデータをプルして、クイックヒートマップをまとめようとしています。その過程で、いくつかの統計を追加したいと思います。データがあり、マップをレンダリングできるという点で、ほぼすべてがうまくいきますが、データが入るまでに時間がかかるため、データを取得した後の計算の処理方法がわかりません。どのように設定すれば、まだデータを受信して​​いない場合でも、状態変数に対して関数を実行できますか？現在、StatCardに小道具として渡される数値としてnullを取得しています。 以下は私の試みです： App.js import React, { Component } from 'react'; import Leaf from './Leaf'; import Dates from './Dates'; import StatCard from './StatCard'; import classes from './app.module.css'; class App extends Component { constructor(props) { super(props); this.state = { data:[], cleanData:[], dateInput: '2019-10-01', loading: false, totalInspections: null, calculate: false }; } …

8 javascript  reactjs  fetch  react-props 

typescriptでreact-adminアプリをセットアップしようとしていますが、react-adminをインポートする方法がよくわかりません。それは私に（単純な）エラーを言っています "Could not find a declaration file for module 'react-admin'. '.../node_modules/react-admin/lib/index.js' implicitly has an 'any' type. Try `npm install @types/react-admin` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-admin';`" @ types / react-adminは有効なパッケージではありませんが、githubやstackoverflowでこれについて文句を言う人を見つけることができませんでした。何か不足していますか？私が見る限り、ほとんどのものが既にtypescriptに移行されています。 編集：これは実際にtsの問題を参照するこれを見つけました。しかし、「数か月かかるだろう」と言ってから5か月が経ちました。

8 reactjs  typescript  react-admin