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

私が作成したコンポーネントがあります： class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: state.playlists } } export …

100 javascript  reactjs  redux 

次のコマンドを使用して、空のReactプロジェクトを作成しました：npx create-react-appon npmv7.0.7およびNodev15.0.1 インストール済み： React v17.0.1、 node-sass v5.0.0、 次に、空白の.scssファイルをAppコンポーネントにインポートしようとしました。 App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; エラーをスローします： Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. package.json { "name": "react-17-node-sass-5", "version": "0.1.0", "private": true, …

100 reactjs  webpack  create-react-app  node-sass  sass-loader 

私はReactjsから始めて、表示する簡単なコンポーネントを書いていた liタグこのエラーに遭遇しました： 予期しないトークン '<' 例をhttp://jsbin.com/UWOquRA/1/edit?html,js,console,outputの下のjsbinに配置しました 私が間違っていることを教えてください。

99 reactjs 

私はたくさんのバスケットボールチームのサイドナブを持っています。ですから、チームの1つがホバーされているときに、チームごとに異なるものを表示したいと思います。また、私はReactjsを使用しているので、別のコンポーネントに渡すことができる変数があれば、すばらしいでしょう。

99 hover  reactjs 

ReactのFont Awesomeアイコンを使おうとすると、render()通常のHTMLでは機能しますが、結果のWebページには表示されません。 render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } これが実際の例です：http : //jsfiddle.net/pLWS3/ 欠点はどこですか？

99 reactjs  font-awesome 

ES6を介して画像とアイコンをwebpackにインポートするための現在のワークフローは次のとおりです。 import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> これはすぐに乱雑になります。ここに私が欲しいものがあります： import * from './images' <img src={doggy} /> <img src={turtle} /> 特定のディレクトリからすべてのファイルを拡張子ではなく名前として動的にインポートし、必要に応じてそれらのファイルを使用する方法が必要だと思います。 これが行われたのを見た人、またはそれについて最善の方法を考えている人はいますか？ 更新： 選択した答えを使用して、これを行うことができました： function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); …

99 reactjs  webpack  ecmascript-6 

jsxで＆nbspタグを使用していますが、スペースをレンダリングしていません。以下は私のコードの小さなスニペットです。助けてください。 var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, });

99 html  reactjs  jsx 

正常に再生するためにreact-router（v4.0.0）およびreact-hot-loader（3.0.0-beta.6）を取得しようとしましたが、ブラウザーコンソールで次のエラーを取得しています： 警告：React.createElement：タイプが無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されません：未定義。おそらく、コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れていました。 index.js： import React from 'react'; import ReactDom from 'react-dom'; import routes from './routes.js'; require('jquery'); import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import './css/main.css'; const renderApp = (appRoutes) => { ReactDom.render(appRoutes, document.getElementById('root')); }; renderApp( routes() ); routes.js： import React from 'react'; import { AppContainer } from 'react-hot-loader'; import { Router, Route, browserHistory, …

99 reactjs  react-router  react-hot-loader 

インラインスタイリングを行うときに、ReactJSでホバーイベントまたはアクティブイベントをどのように達成できますか？ onMouseEnter、onMouseLeaveのアプローチにはバグがあることがわかったので、別の方法があることを期待しています。 具体的には、コンポーネントにすばやくマウスを合わせると、onMouseEnterイベントのみが登録されます。onMouseLeaveは起動しないため、状態を更新できません...コンポーネントがまだホバーされているように見えます。「：active」css疑似クラスを模倣した場合も、同じことに気づきました。本当に速くクリックすると、onMouseDownイベントだけが登録されます。onMouseUpイベントは無視されます...コンポーネントはアクティブなままです。 これが問題を示すJSFiddleです：https ://jsfiddle.net/y9swecyu/5/ 問題のあるJSFiddleのビデオ：https ://vid.me/ZJEO コード： var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: function() { this.setState({ hover: true }); console.log('enter'); }, onMouseLeaveHandler: function() { this.setState({ hover: false }); console.log('leave'); }, render: function() { var inner = normal; if(this.state.hover) { inner = …

99 javascript  css  reactjs  mouseevent  dom-events 

パラメータなし function clickMe(e){ //e is the event } <button onClick={this.clickMe}></button> パラメータ付き function clickMe(parameter){ //how to get the "e" ? } <button onClick={() => this.clickMe(someparameter)}></button> 取得したいevent。どうすれば入手できますか？

99 javascript  reactjs  events  dom-events 

だから私はこれを持っています： let total = newDealersDeckTotal.reduce(function(a, b) { return a + b; }, 0); console.log(total, 'tittal'); //outputs correct total setTimeout(() => { this.setState({dealersOverallTotal: total}); }, 10); console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total newDealersDeckTotalは単なる数値の配列です。[1, 5, 9]たとえばthis.state.dealersOverallTotal、正しい合計は表示されませんが、表示されますtotalか？これで問題が解決するかどうかを確認するために、タイムアウト遅延を設定しました。明らかなことはありますか、それとももっとコードを投稿する必要がありますか？

99 javascript  reactjs  state  setstate 

オブジェクトを含む配列であるステーションと呼ばれるデータがあります。 stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] 各配列位置のUIコンポーネントをレンダリングしたいのですが。これまでのところ私は書くことができます var stationsArr = [] for (var i = 0; i < this.data.stations.length; i++) { stationsArr.push( <div className="station"> {this.data} </div> ) } そしてレンダリングします render(){ return ( {stationsArr} ) } 問題は、すべてのデータが印刷されることです。代わりに、次のようなキーを表示したいのです{this.data.call}が、何も出力されません。 このデータをループして、配列の各位置の新しいUI要素を返すにはどうすればよいですか？

98 javascript  reactjs 

私は以下を持っています： <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> DefaultRouteを使用する場合、* Dashboardはダッシュボード内でレンダリングする必要があるため、SearchDashboardは正しくレンダリングされません。 「app」ルート内のDefaultRouteがルート「searchDashboard」を指すようにしたいと思います。これはReact Routerでできることですか、それとも通常のJavascript（ページリダイレクト用）を使用する必要がありますか？ 基本的に、ユーザーがホームページにアクセスした場合は、代わりに検索ダッシュボードに送信します。だから私は同等のReact Router機能を探していると思いますwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

98 javascript  routes  reactjs  url-redirection  react-router 

React Nativeでフォームを作成していてTextInput、画面幅の80％にしたいと考えています。 HTMLと通常のCSSでは、これは簡単です。 input { display: block; width: 80%; margin: auto; } React Nativeがdisplayプロパティ、パーセンテージ幅、または自動マージンをサポートしていないことを除いて。 では、代わりに何をすべきでしょうか？この問題については、React Nativeの課題追跡にいくらか議論がありますが、提案された解決策は厄介なハックのようです。

98 javascript  css  reactjs  react-native 

CSSファイルをreactコンポーネントにインポートしたい。 試しましimport disabledLink from "../../../public/styles/disabledLink";たが、以下のエラーが発生します。 モジュールが見つかりません：エラー：c：\ Users \ User \ Documents \ pizza-app \ client \ src \ components @の「file」または「directory」../../../ public / styles / disabledLinkを解決できません。 /client/src/components/ShoppingCartLink.js 19：20-66ハッシュ：2d281bb98fe0a961f7c4バージョン：webpack 1.13.2 C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css ロードしようとしているCSSファイルの場所です。 私には、インポートが正しいパスを検索していないように見えます。 ../../../それで、3つのフォルダーレイヤーの上のパスを検索し始めると思いました。 C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js CSSファイルをインポートする必要があるファイルの場所です。 何が間違っているので、どうすれば修正できますか？

98 javascript  reactjs  relative-path