タグ付けされた質問 「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 

で作業しているときに非常に混乱することがありReactます。 インターネットで利用できるサンプルはたくさんあり.jsますが、reactでファイルを使用しますが、他の多くのファイルを使用してい.jsxます。 私は.jsxファイルについて読みましたが、私の理解では、ファイル内にhtmlタグを書き込むことができますjavascript。しかし、同じことを.jsファイルに書き込むこともできます。 したがって、これら2つの拡張の間の実際の違いは何です.jsと.jsx？

211 reactjs  jsx 

Reactの公式ドキュメントではそれが言及しています- Reactクラスのライフサイクルメソッドに精通している場合は、useEffectフックを、componentDidMount、componentDidUpdate、およびcomponentWillUnmountを組み合わせたものと考えることができます。 私の質問は- componentWillMount()ライフサイクルメソッドをフックで使用するにはどうすればよいですか？

176 javascript  reactjs  jsx  react-hooks 

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

162 reactjs  jsx 

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

159 javascript  html  reactjs  jsx 

これに取り組む正しい方法は何ですか？ var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(<Hello />, …

141 javascript  reactjs  jsx 

次のような非常にシンプルな機能コンポーネントがあります。 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 

Reactアプリでlintを実行していますが、次のエラーが表示されます。 error JSX props should not use arrow functions react/jsx-no-bind そして、これは私が矢印関数を実行しているところです（内部onClick）： {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

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 

チェックボックスTSX（JSX）要素があります： <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> VS codeの助けを借りて、の入力パラメータータイプがであることthis.handleCheckboxClickがわかりましたMouseEvent<HTMLInputElement>。だから私はそれを実装しました： private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } 次に[ts] Type 'MouseEvent' is not generic.、次の画像に示すように、次のようなエラーが表示されます。 私のパッケージのバージョン： "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", 何故ですか？

97 reactjs  typescript  events  types  jsx 

Typescript、React、Redux（すべてElectronで実行）を使用するプロジェクトに取り組んでいますが、あるクラスベースのコンポーネントを別のコンポーネントに含めて、それらの間でパラメーターを渡そうとすると、問題が発生します。大まかに言えば、コンテナコンポーネントには次の構造があります。 class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); そして子コンポーネント： interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 明らかに、私は基本的なものだけを含めており、これらのクラスにはさらに多くのものがありますが、有効なコードのように見えるものを実行しようとすると、まだエラーが発生します。私が得ている正確なエラー： …

91 reactjs  typescript  redux  electron  jsx 

セットアップしましたeslint＆eslint-plugin-react。 ESLintを実行すると、リンターはno-unused-varsReactコンポーネントごとにエラーを返します。 JSXまたはReact構文を使用していることを認識していないと思います。何か案は？ 例： app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> {this.props.children} </div> ); } } リンターエラー： /my_project/src/components/app.js 1:8 error 'React' is defined but never used no-unused-vars 2:8 error 'Header' is …

91 javascript  reactjs  jsx  eslint 

現在、ReactNativeを使用してテストアプリを構築しています。これまでのところ、Imageモジュールは正常に機能しています。 たとえば、という名前の画像がある場合avatar、以下のコードスニペットは正常に機能します。 <Image source={require('image!avatar')} /> しかし、それを動的な文字列に変更すると、 <Image source={require('image!' + 'avatar')} /> エラーが発生します： 不明なモジュール「image！avatar」が必要です。モジュールがそこにあることが確実な場合は、パッケージャーを再起動してみてください。 明らかにこれは不自然な例ですが、動的な画像名は重要です。React Nativeは動的画像名をサポートしていませんか？

84 javascript  react-native  jsx