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

http://catfacts-api.appspot.com/api/facts?number=99Postmanを介してこのエンドポイントをヒットすると、戻りますJSON さらに、create-react-appを使用しており、サーバー構成の設定を避けたいと考えています。 クライアントコードでfetch同じことを実行しようとしていますが、エラーが発生します。 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：3000 'はアクセスを許可されていません。不透明な応答がニーズを満たす場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。 したがって、次のようにCORSを無効にするFetchにオブジェクトを渡そうとしています。 fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'}) .then(blob => blob.json()) .then(data => { console.table(data); return data; }) .catch(e => { console.log(e); return e; }); 興味深いことに、私が受け取るエラーは、実際にはこの関数の構文エラーです。fetch{mode： 'no-cors'}オブジェクトを削除して別のURLを指定すると、問題なく動作するため、実際のものが壊れているかどうかはわかりません。 また、オブジェクトを渡そうとしました{ mode: 'opaque'}が、これは上から元のエラーを返します。 CORSを無効にするだけで十分です。何が欠けていますか？

166 javascript  reactjs  cors  create-react-app  fetch-api 

現在、ReactアプリケーションをTypeScriptに移行しています。これまでのところ、これはかなりうまくrender機能しますが、関数の戻り値の型と関数コンポーネントに問題があります。 これまで、私は常にJSX.Element戻り値の型として使用していましたが、コンポーネントが何もレンダリングしないことを決定した場合、つまりreturnが有効な値ではないnullため、これnullは機能しなくなりましたJSX.Element。これが私の旅の始まりでした。ウェブを検索したところ、ReactNode代わりに使用する必要があることがわかりました。これにはnull、発生する可能性のあるその他のいくつかの事項も含まれています。これはより良い賭けのようでした。 ただし、関数コンポーネントを作成するときに、TypeScriptはReactNode型について文句を言います。繰り返しますが、私が見つけたいくつかの検索の後、関数コンポーネントにはReactElement代わりに使用する必要があります。しかし、そうすると、互換性の問題はなくなりますが、TypeScriptは再びnull有効な値ではないと文句を言います。 したがって、長い話を短くするために、3つの質問があります。 JSX.Element、ReactNodeとの違いは何ReactElementですか？ renderクラスコンポーネントのメソッドがを返すReactNodeのに、関数コンポーネントが返すのはReactElementなぜですか？ どうすればこれを解決できnullますか？

166 javascript  reactjs  typescript 

React 16.2では、サポートの改善Fragmentsが追加されました。詳細については、Reactのブログ投稿（こちら）を参照してください。 私たちは皆、次のコードに精通しています。 render() { return ( // Extraneous div element :( <div> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </div> ); } はい、コンテナーdivが必要ですが、それほど大きな問題ではありません。 React 16.2では、周囲のコンテナーdivを回避するためにこれを行うことができます。 render() { return ( <Fragment> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </Fragment> ); } どちらの場合でも、内部要素を囲むコンテナー要素が必要です。 …

165 reactjs 

Reactコンポーネントを記述しようとしています。html見出しタグ（h1、h2、h3など）の場合、見出しの優先度は、小道具で定義した優先度に基づいて動的に変化します。 ここで私がやろうとしていること。 <h{this.props.priority}>Hello</h{this.props.priority}> 予想される出力： <h1>Hello</h1> これは機能していません。これを行うための可能な方法はありますか？

162 reactjs  jsx 

誰かが違いを説明できますか <Route exact path="/" component={Home} /> そして <Route path="/" component={Home} /> 「正確」の意味がわかりません

161 reactjs  react-router  react-router-dom 

次の状態です。 this.setState({ selected: { id: 1, name: 'Foobar' } }); 次に、状態を更新します。 this.setState({ selected: { name: 'Barfoo' }}); setStateマージすると仮定しているので、次のようになると予想します。 { selected: { id: 1, name: 'Barfoo' } }; しかし、代わりにIDを使用し、状態は次のとおりです。 { selected: { name: 'Barfoo' } }; これは予想される動作ですか、ネストされた状態オブジェクトの1つのプロパティのみを更新するための解決策は何ですか？

160 javascript  reactjs 

react-native run-androidコマンドは、Androidシミュレーターにメッセージを残して終了します。メッセージは次のとおりです。 スクリプトを読み込めません。Metroサーバーを実行しているか、バンドル「index.android.bundle」がリリース用に正しくパッケージ化されていることを確認してください。 何が悪いのですか？

160 reactjs  react-native  react-native-android  react-native-cli  metro-bundler 

ReactJSでビューポートの高さを取得するにはどうすればよいですか？私が使用する通常のJavaScriptでは window.innerHeight() しかし、ReactJSを使用すると、この情報を取得する方法がわかりません。私の理解は ReactDOM.findDomNode() 作成されたコンポーネントに対してのみ機能します。ただし、これはdocumentor body要素には当てはまりません。これにより、ウィンドウの高さがわかります。

160 javascript  reactjs  window  viewport 

これが私が試したこととそれがどうやってうまくいかないかです。 これは機能します： <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> これはしません： <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> descriptionプロパティは、HTMLコンテンツの通常の文字列です。ただし、何らかの理由でHTMLではなく文字列としてレンダリングされます。 助言がありますか？

159 javascript  html  reactjs  jsx 

コンポーネントの助けを借りてビュー間のカスタムナビゲーションを備えたデモアプリを開発しながら、React Nativeの可能性を探っていNavigatorます。 メインアプリクラスはナビゲーターをレンダリングし、内部renderSceneは渡されたコンポーネントを返します。 class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}} configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createElement(route.component, { navigator }); } }} /> ); } } …

158 javascript  ios  navigation  reactjs  react-native 

var MySelect = React.createClass({ change: function(){ return document.querySelector('#lang').value; }, render: function(){ return( <div> <select id="lang"> <option value="select" onChange={this.change}>Select</option> <option value="Java" onChange={this.change}>Java</option> <option value="C++" onChange={this.change}>C++</option> </select> <p></p> <p value={this.change}></p> </div> ); } }); React.render(<MySelect />, document.body); onChangeイベントは動作しません。

158 javascript  reactjs 

通常のクラスのリストに動的クラスを追加する必要がありますが、次のような方法（私はbabelを使用しています）がわかりません。 <div className="wrapper searchDiv {this.state.something}"> ... </div> 何か案は？

158 css  reactjs 

私はいくつかのコードを書きました： function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } エラーが発生します： JSX要素タイプにElemは構成または呼び出しシグネチャがありません どういう意味ですか？

157 reactjs  typescript  material-ui 

コンポーネントがReactで再レンダリングされる原因をデバッグする体系的なアプローチはありますか？シンプルなconsole.log（）を使用して、何回レンダリングされるかを確認しましたが、私の場合、コンポーネントが複数回（つまり4回）レンダリングする原因を突き止めるのに問題があります。タイムラインやすべてのコンポーネントツリーのレンダリングと順序を表示するツールはありますか？

156 reactjs  redux 

Reactの波括弧表記とhrefタグを組み込む方法はありますか？状態に次の値があるとします。 {this.state.id} タグの次のHTML属性： href="#demo1" id="demo1" idHTML属性に状態を追加して、次のようなものを取得する方法はありますか。 href={"#demo + {this.state.id}"} どちらが得られます： #demo1

155 javascript  html  reactjs  ecmascript-6