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

React Routerを使用したReact.jsアプリケーションには次の構造があります。 var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); …

315 javascript  properties  reactjs  react-router 

ブラウザウィンドウのサイズが変更されたときにReactでビューを再レンダリングするにはどうすればよいですか？ バックグラウンド ページ上に個別にレイアウトしたいブロックがいくつかありますが、ブラウザーウィンドウが変更されたときにそれらも更新したいです。最終的な結果は、Ben Hollandの Pinterestレイアウトのようなものになりますが、jQueryだけでなくReactを使用して書かれます。私はまだ道を外れています。 コード これが私のアプリです： var MyApp = React.createClass({ //does the http get from the server loadBlocksFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', mimeType: 'textPlain', success: function(data) { this.setState({data: data.events}); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadBlocksFromServer(); }, render: function() …

313 javascript  reactjs  resize 

オプションのパスパラメーターを使用してパスを宣言したいので、ページを追加すると、何かを追加する（たとえば、データを入力する）ことができます。 http：// localhost / app / path / to / page <= ページをレンダリングします http：// localhost / app / path / to / page / pathParam <= pathParamに従ってデータをページにレンダリングします 私の反応ルータでは、2つのオプションをサポートするために、次のパスがあります（これは簡略化された例です）。 <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 私の質問は、1つのルートで宣言できるかどうかです。2行目のみを追加すると、パラメーターのないルートが見つかりません。 編集＃1： 次の構文についてここで述べた解決策は私にとってうまくいきませんでした、それは適切なものですか？ドキュメントに存在しますか？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 私の反応ルーターのバージョンは：1.0.3

306 javascript  reactjs  react-router  react-router-v4 

私が入力したときcreate-react-app my-app、私の端末でコマンドを、それが仕事に表示されます-私は、というメッセージを取得しますが、そのプロセスの終わりに成功したなど、すべてのライブラリをダウンロードしますtemplate was not provided。 入力 user@users-MacBook-Pro-2 Desktop% create-react-app my-app 出力 Creating a new React app in /Users/user/Desktop/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... ..... nothing out of the ordinary here ..... ✨ Done in 27.28s. A template was not provided. This …

298 reactjs  create-react-app 

エラーの原因は何Error: EACCES: permission denied, access '/usr/local/lib/node_modules'ですか？ npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: …

298 node.js  reactjs  npm  install 

propsReact.jsで、イベントを使用して子を親に渡す簡単な方法はありませんか？ var Child = React.createClass({ render: function() { <a onClick={this.props.onClick}>Click me</a> } }); var Parent = React.createClass({ onClick: function(event) { // event.component.props ?why is this not available? }, render: function() { <Child onClick={this.onClick} /> } }); 制御されたコンポーネントを使用して入力の値を渡すことができることは知っていますが、キット全体のkaboodleを渡すとよいでしょう。子コンポーネントには、検索する必要がない一連の情報が含まれている場合があります。 おそらく、コンポーネントをイベントにバインドする方法はありますか？ 更新– 2015年9月1日 使用後一年以上にわたって反応し、セバスチャン・ローバーの答えでオンに拍車をかけ、私は両親に関数に引数として子コンポーネントを渡すことであると結論付けてきたではないように反応することで、これまでにも良いアイデアそれでした。答えを切り替えました。

295 javascript  reactjs 

JSXではprops、引用符で囲まれた属性値の中から値をどのように参照しますか？ 例えば： <img className="image" src="images/{this.props.image}" /> 結果のHTML出力は次のとおりです。 <img class="image" src="images/{this.props.image}">

295 javascript  reactjs  react-props 

私はReactの初心者で、APIを使用するアプリを作成しようとしています。私はこのエラーを受け続けます： TypeError：this.setStateは関数ではありません API応答を処理しようとしたとき。このバインディングに問題があると思いますが、それを修正する方法がわかりません。これが私のコンポーネントのコードです： var AppMain = React.createClass({ getInitialState: function() { return{ FirstName: " " }; }, componentDidMount:function(){ VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }); }, function(){ console.info("API initialisation failed"); }, '5.34'); }, render:function(){ return ( <div className="appMain"> <Header /> …

288 javascript  reactjs 

静的画像にアクセスして、backgroundImageReact 内のインラインプロパティ内で使用しようとしています。残念ながら、私はこれを行う方法について枯渇しています。 一般に、私はあなたが次のようにしたと思った： import Background from '../images/background_image.png'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")" }; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } } これは<img>タグで機能します。誰かが2つの違いを説明できますか？ 例： <img src={ Background } /> 正常に動作します。 ありがとうございました！

286 javascript  reactjs 

私は、Reactコンポーネントにインラインスクリプトを追加しようとするという比較的単純な問題を抱えています。これまでのところ： 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script> </article> …

266 javascript  reactjs  ecmascript-6  react-jsx 

子をレンダリングする単純なコンポーネントを考える： class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; 質問：子供の小道具のpropTypeはどうあるべきですか？ オブジェクトとして設定すると、複数の子を持つコンポーネントを使用すると失敗します。 <ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent> 警告：失敗したプロップタイプ：に 提供されたchildrenタイプの無効なプロップ、予期された。arrayContainerComponentobject 配列として設定した場合、子を1つだけ指定すると失敗します。 <ContainerComponent> <div>1</div> </ContainerComponent> 警告：失敗したプロップタイプ：ContainerComponentに提供されたタイプオブジェクトの無効なプロップ子、予期される配列。 アドバイスしてください、私は子要素のpropTypesチェックを実行するだけでいいですか？

265 reactjs  jsx  react-proptypes 

オブジェクトのプロパティを更新することはまったく可能setStateですか？ 何かのようなもの： this.state = { jasper: { name: 'jasper', age: 28 }, } 私が試してみました： this.setState({jasper.name: 'someOtherName'}); この： this.setState({jasper: {name: 'someothername'}}) 1つ目は構文エラーとなり、2つ目は何もしません。何か案は？

265 reactjs  state 

現在、react router v4を使用してルートをネストするのに苦労しています。 最も近い例は、React-Router v4 Documentationのルート設定 です。 アプリを2つの部分に分割したい。 フロントエンドと管理領域。 私はこのようなことを考えていました： <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> フロントエンドのレイアウトとスタイルは、管理領域とは異なります。したがって、フロントページ内のルートホーム、つまり1つは子ルートである必要があります。 / homeはフロントページコンポーネントにレンダリングされ、/ admin / homeはバックエンドコンポーネント内にレンダリングされます。 私はいくつかのバリエーションを試しましたが、常に/ homeまたは/ admin / homeを打たないことに終わりました。 編集-19.04.2017 この投稿には現在多くの意見があるため、最終的なソリューションで更新しました。誰かのお役に立てば幸いです。 …

261 javascript  reactjs  nested  react-router  react-router-v4 

ユーザーが自分のフォームをデザインできるアプリを作成しています。たとえば、フィールドの名前と、含まれる他の列の詳細を指定します。 このコンポーネントは、JSFiddleとしてここから入手できます。 私の初期状態は次のようになります： var DynamicForm = React.createClass({ getInitialState: function() { var items = {}; items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'customer_name', autocomplete_from: 'customer_name', title: '' }; items[2] = { name: 'field 2', populate_at: 'web_end', same_as: 'user_name', autocomplete_from: 'user_name', title: '' }; return { items }; }, render: …

259 javascript  reactjs  state 

私はreactjsを使用しています。 ブラウザの下のコードを実行すると、次のようになります。 Uncaught TypeError：スーパー式は、未定義ではなく、nullまたは関数でなければなりません 何が悪いのかについてのヒントはすべていただければ幸いです。 まず、コードのコンパイルに使用される行： browserify -t reactify -t babelify examples/temp.jsx -o examples/public/app.js そしてコード： var React = require('react'); class HelloMessage extends React.Component { render() { return <div>Hello </div>; } } 更新：この問題を3日間地獄の火で燃やした後、最新バージョンのreactを使用していないことがわかりました。 グローバルにインストール： sudo npm install -g react@0.13.2 ローカルにインストール： npm install react@0.13.2 ブラウザが正しいバージョンも使用していることを確認してください： <script type="text/javascript" src="react-0.13.2.js"></script> これにより他の誰かが3日間貴重な命を救うことを願っています。

256 reactjs  ecmascript-6