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

私はreact-routerでreactを使用しています。反応ルータの「リンク」でプロパティを渡そうとしています var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); …

137 javascript  reactjs  react-router 

私は最近AngularからReactJに移りました。API呼び出しにjQueryを使用しています。リストに印刷されるランダムなユーザーリストを返すAPIがあります。 API呼び出しの記述方法がわかりません。このためのベストプラクティスは何ですか？ 以下を試しましたが、何も出力されません。必要に応じて、代替のAPIライブラリを実装できます。 以下は私のコードです： import React from 'react'; export default class UserList extends React.Component { constructor(props) { super(props); this.state = { person: [] }; } UserList(){ return $.getJSON('https://randomuser.me/api/') .then(function(data) { return data.results; }); } render() { this.UserList().then(function(res){ this.state = {person: res}; }); return ( <div id="layout-content" className="layout-content-wrapper"> <div className="panel-list"> {this.state.person.map((item, …

137 javascript  jquery  reactjs 

次のような非常にシンプルな機能コンポーネントがあります。 import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; そして別のコンポーネント： import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout = (props: LayoutProps) => ( <Aux> <div>Toolbar, SideDrawer, Backdrop</div> <main> …

137 reactjs  typescript  jsx  typescript2.0 

エラーの私の出力： 無効な構成オブジェクト。Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されました。-configuration.moduleに不明なプロパティ「ローダー」があります。次のプロパティは有効です：オブジェクト{exprContextCritical？、exprContextRecursive？、exprContextRegExp？、exprContextRequest？、noParse？、rules、defaultRules？、unknownContextCritical？、unknownContextRecursive？、unknownContextRegExp？、unknownContextRequest？、unsafeCache？、wrappedContextCritical？、wrappedContextRecursive ？、strictExportPresence？、strictThisContextOnImports？}->通常のモジュールに影響するオプション（NormalModuleFactory）。 私のwebpack.config.js： var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: APP_DIR + '/index.jsx', module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader' } ] }, output: …

136 reactjs  webpack 

TLDR：チェックされた動作中のjsbinの代わりにdefaultCheckedを使用します。 チェックされたときにラベルのテキストを取り消す単純なチェックボックスを設定しようとしています。何らかの理由で、コンポーネントを使用してもhandleChangeが起動されません。誰かが私が間違っていることを説明できますか？ var CrossoutCheckbox = React.createClass({ getInitialState: function () { return { complete: (!!this.props.complete) || false }; }, handleChange: function(){ console.log('handleChange', this.refs.complete.checked); // Never gets logged this.setState({ complete: this.refs.complete.checked }); }, render: function(){ var labelStyle={ 'text-decoration': this.state.complete?'line-through':'' }; return ( <span> <label style={labelStyle}> <input type="checkbox" checked={this.state.complete} ref="complete" onChange={this.handleChange} /> {this.props.text} …

136 checkbox  onchange  reactjs 

私はで遊んだReactとES6使用babelしてwebpack。複数のコンポーネントを異なるファイルで構築し、単一のファイルにインポートして、それらをバンドルしたいwebpack 私がこのようないくつかのコンポーネントを持っているとしましょう： my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } main-page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends React.Component{ render(){ return( <MyNavbar /> …

135 reactjs  ecmascript-6  webpack 

反応プロジェクトの画像に問題があります。確かに、私はいつもsrc属性への相対パスはファイルアーキテクチャ上に構築されていると思っていました ここに私のファイルアーキテクチャ： components file1.jsx file2.jsx file3.jsx container img js ... ただし、パスがURLに基​​づいて構築されていることに気付きました。私のコンポーネントの1つ（たとえば、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で処理されるどのような形式のルートでも、すべての画像を同じパスで表示できることを望んでいます。

135 javascript  reactjs  webpack 

リアクティブreduxのコンポーネントとコンテナーの違いは何ですか？

135 javascript  reactjs  redux 

私はreactjsの初心者です。reactアプリにブートストラップを含めたいです ブートストラップをインストールしました npm install bootstrap --save 今、私の反応アプリでブートストラップCSSとJSをロードしたいと思います。 私はwebpackを使用しています。 webpack.config.js var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } …

135 twitter-bootstrap  reactjs  webpack 

反応アプリケーションをシステムに複製し、次のコマンドを実行しました npm install -g create-react-app npm install --save react react-dom その後私は走った npm start しかし、それは上記のエラーを投げました、それは私がgithubにそれをプッシュした私の他のシステムでうまく機能しています。しかし、ウィンドウズかマックかに関わらずクローンした後は他のシステムでは動作しません。

135 reactjs 

次の疑似コードの例で、コンテナがfoo.barを変更したときに子が再レンダリングしないのはなぜですか？ Container { handleEvent() { this.props.foo.bar = 123 }, render() { return <Child bar={this.props.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } } forceUpdate()コンテナの値を変更した後に呼び出しても、子はまだ古い値を示しています。

135 javascript  html  reactjs 

通知コンポーネントがあり、タイムアウト設定があります。タイムアウト後、を呼び出しますthis.setState({isTimeout:true})。 私がしたいことは、すでにタイムアウトした場合、何もレンダリングしないことです： render() { let finalClasses = "" + (this.state.classes || ""); if (isTimeout){ return (); // here has some syntax error } return (<div>{this.props.children}</div>); } 問題は：return（）; //ここに構文エラーがあります

135 reactjs 

ReadableStreamオブジェクトから情報を取得するにはどうすればよいですか？ 私はFetch APIを使用していますが、ドキュメントからこれが明確であるとは思いません。 本文はとして返されReadableStreamます。このストリーム内のプロパティにアクセスしたいだけです。ブラウザー開発ツールの[応答]で、この情報がJavaScriptオブジェクトの形式でプロパティに整理されているように見えます。 fetch('http://192.168.5.6:2000/api/car', obj) .then((res) => { if(res.status == 200) { console.log("Success :" + res.statusText); //works just fine } else if(res.status == 400) { console.log(JSON.stringify(res.body.json()); //res.body is undefined. } return res.json(); })

135 javascript  node.js  reactjs  fetch 

以下のコードを使用して、Reactコンポーネントにデフォルトの小道具を設定しますが、機能しません。このrender()メソッドでは、「未定義の小道具」という出力がブラウザコンソールに出力されたことがわかります。コンポーネントの小道具のデフォルト値を定義するにはどうすればよいですか？ export default class AddAddressComponent extends Component { render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log('undefined props') } ... } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired } AddAddressComponent.defaultProps = { cityList: [], provinceList: [], } AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: PropTypes.array.isRequired, provinceList: PropTypes.array.isRequired, }

134 reactjs  ecmascript-6 

ReactJSコンポーネント内から完全なURLを取得するにはどうすればよいですか？ 私はそれが次のようなものであるべきだと思っていますthis.props.locationが、それはundefined

134 reactjs