問題タブ [react-props]

ユーザーの情報を表示するために使用するダンプ コンポーネントがあるとします。ユーザー情報をコンポーネントに渡す方法は 2 つあります。

1):

2):

では、どの方法を使用すればよいですか？私が知っているいくつかの長所と短所を 2 つの方法でリストします。

1)

長所：

• ロジックは非常に理解しやすく、「魔法のような」ことは起こらず、渡されたものは何でもコンポーネントに表示されます。

• 浅い比較状態と小道具 ( https://reactjs.org/docs/shallow-compare.html )によって PureComponent のパワーを使用できるため、コンポーネントは必要なときにのみ再レンダリングされます。

短所：

• 次のように、渡す多くのパラメーターを入力する必要があり<UserItem userName={user.name} userEmail={user.email}>ます (spreading operator を使用しない限り...user、すべてのオブジェクト プロパティを渡します)。

• コンポーネント内でオブジェクト メソッドを使用できません。たとえば、user.totalMoneys()オブジェクトには遅延計算されたプロパティがいくつかあるため、 User モデルには method があります。

2)

長所：

• 渡すのは簡単に見えます:<UserItem user={user}>

• UserItem 内でオブジェクト メソッドを使用できます

短所：

• PureComponent の利点を使用できず、自分自身を比較する必要があります。

私は反応フレームワークの初心者なので、私の質問は多くの人にとって基本的なものに見えるかもしれません。しかし、私はこの部分で立ち往生していると信じてください。ボタンのクリック時にテキスト ボックスの値を取得し、その値を小道具として他の関数に送信しようとしています。テキスト ボックス フィールドの値を抽出することはできますが、クリック イベントで、「未定義のプロパティ 'props' を読み取れません」というエラーが発生します。

重要なポイントは次のとおりです。

1. termchange() は、入力テキスト値を抽出するために使用されます。
2. handleclick は、テキストボックス値の onclick イベントを抽出するために使用されます。
3. oncitychange は、テキストボックスの値を送信する関数です (oncitychange() 関数は別のコンポーネント内にあります)。

前もって感謝します。

ここに私のコードがあります:-

私は学校のテストのセクションの最後の仕様にいます。

select には、新しい動物を送信する onChange イベントが必要です

基本的に、変更に対応するために、関数を子に渡すことができないようですhandleSubmit...これが残りの仕様です。

これは親コンポーネントですExhibit:

これはAnimalSelect(の子Exhibit) コンポーネントです:

残念ながら、これは私が得ている唯一のエラーです。

何か案は？

React 経由で出力したいオブジェクトがあります。

そして私の反応コンポーネント（カットダウン）は別のコンポーネントです

上記のスニペットからわかるように、小道具で配列 Answers を使用してコンポーネント Answer の配列を挿入しようとしていますが、反復はしますが、HTML には出力されません。