react propsの値の渡し方

Question

react-reduxを使用したアプリを作っています。
クリックしたitemを引数にしてアクションを発行します。ここら辺の処理は正常にできていますが、フロント表示への処理が上手くいきません。

Answer 1

こんにちは

key は特別なpropsで、コンポーネントには渡されません。
ご質問のコードでいえば、RelatedPartsFacet の中で使っている、 props.key は undefined になります。

以下、これを簡単に確かめる手順を示します。

create-react-app で何らかの確認用のアプリを作り、 App.js を以下のように修正します。

import React from 'react';

const Item = props => {

  console.log(props.key);

  return (
    <li>{props.data}</li>
  );
};


function App() {

  const ary = [ 'foo', 'bar', 'baz' ];

  return (
    <ul>
      {ary.map(data =>
        <Item key={data} data={data} />
      )}
    </ul>
  );
}


export default App;

上記のAppは、以下のように3つのリストアイテムを持つ <ul> になります。

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

以下は、上記のように修正した　App.js をマウントして表示させ、開発者ツールの Console を確認したところです。

Item で console.log(props.key); と表示させているところが、3回とも undefined と出力されていることがわかります。また、その上に以下の警告が出力されています。

Warning: Item: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

曰く、「 key は propではありません。それにアクセスしようとすると undefined が返されます。子コンポーネントで同じ値を使う必要があるのなら、別のpropで渡すべきです」とあります。

またメッセージの末尾にある URL https://fb.me/react-special-props を開くと、以下が書かれています。

Special Props Warning

Most props on a JSX element are passed on to the component, however,
there are two special props (ref and key) which are used by React,
and are thus not forwarded to the component.

上記に沿えば、ご質問にあるコードでは

<RelatedPartsFacet key={item} ・・・

と書いているところで、もう一つ、たとえば item というpropを追加して

<RelatedPartsFacet key={item} item={item}

とします。 補足ですが、もし item がオブジェクトであるならば、item に何らかの一意なid というようなプロパティを用意しておいて、以下のようにするとよいでしょう。

<RelatedPartsFacet key={item.id} item={item}

上記のように、 item={item} を追加しておいて、RelatedPartsFacet を styled で作っているところで

props.clickPartsFacetItem == props.key

を

props.clickPartsFacetItem == props.item

とすることが、まずは修正すべき点かなと思います。

なお、上記で、 == は === とすべきかもしれない、という気もしましたが、より詳細なコードや仕様が明らかにならないと何ともいえないですし、このご質問の本題ではないので、この点の詳細は割愛します。

以上、参考になれば幸いです。