タグ付けされた質問 「react-props」

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で出力したいオブジェクトがあります question = { text: "Is this a good question?", answers: [ "Yes", "No", "I don't know" ] } そして私の反応コンポーネント（カットダウン）は別のコンポーネントです class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.forEach(answer => { console.log("Entered"); //This does ifre <Answer answer={answer} /> //THIS DOES NOT WORK })} } export default QuestionSet; 上記の抜粋からわかるように、小道具の配列Answersを使用してコンポーネントAnswerの配列を挿入しようとしています。これは繰り返し実行されますが、HTMLには出力されません。

108 reactjs  react-props 

クラスを使用せずに、reactの機能的なステートレスコンポーネントでPropTypeを使用するにはどうすればよいですか？ export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

私のコードでは、を明示的に使用していませんがcomponentWillMount、実行中にいくつかの警告が表示されますwebpack。 react-dom.development.js：12386警告：componentWillMountは名前が変更されたため、使用をお勧めしません。詳細については、https：/fb.me/react-unsafe-component-lifecyclesを参照してください。 副作用のあるコードをcomponentDidMountに移動し、コンストラクターで初期状態を設定します。 非厳密モードでこの警告を抑制するには、componentWillMountの名前をUNSAFE_componentWillMountに変更します。React 17.xでは、UNSAFE_名のみが機能します。廃止されたすべてのライフサイクルの名前を新しい名前に変更するにnpx react-codemod rename-unsafe-lifecyclesは、プロジェクトのソースフォルダーで実行できます。 次のコンポーネントを更新してください：foo、bar 私は提案されたを実行しましたnpx react-codemod rename-unsafe-lifecyclesが、警告は消えませんでしたが、その表現を react-dom.development.js：12386警告：componentWillMountの名前が変更されたため、使用をお勧めしません。[...] ここでは、fooとbar私たちのチームが書いた両方のカスタムコンポーネント、および外部ライブラリのいくつかのコンポーネントがあります。Visual Studioソリューションを完全に検索しcomponentWillMountても結果は得られません。誰かが私に何が間違っていたのか説明してくれませんか？ 別の質問でコメントを読んだ で明示的な場所はありませんがcomponentWillMount、コンストラクターの後にコード行があります[...]コンストラクターstate={ tabindex:0 }に「移動」するにはどうすればよいですか？ 答えは書くこと constructor(props) {super(props); this.state = { tabindex:0 }}でした。誰かがここで何が起こっていたか説明できますか？コードではどのようなパターンを探す必要がありますか？ さらなる詳細 printWarning @ react-dom.development.js:12386 lowPriorityWarningWithoutStack @ react-dom.development.js:12407 ./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12577 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25641 commitRootImpl @ react-dom.development.js:24871 unstable_runWithPriority @ scheduler.development.js:815 runWithPriority$2 @ react-dom.development.js:12188 commitRoot @ …

9 javascript  reactjs  react-props 

Open Dataからデータをプルして、クイックヒートマップをまとめようとしています。その過程で、いくつかの統計を追加したいと思います。データがあり、マップをレンダリングできるという点で、ほぼすべてがうまくいきますが、データが入るまでに時間がかかるため、データを取得した後の計算の処理方法がわかりません。どのように設定すれば、まだデータを受信して​​いない場合でも、状態変数に対して関数を実行できますか？現在、StatCardに小道具として渡される数値としてnullを取得しています。 以下は私の試みです： App.js import React, { Component } from 'react'; import Leaf from './Leaf'; import Dates from './Dates'; import StatCard from './StatCard'; import classes from './app.module.css'; class App extends Component { constructor(props) { super(props); this.state = { data:[], cleanData:[], dateInput: '2019-10-01', loading: false, totalInspections: null, calculate: false }; } …

8 javascript  reactjs  fetch  react-props