react 子コンポーネントのクラス排他処理

Question

https://teratail.com/questions/214900

こちらに正解を記載いただいたのですが、現プロジェクトのバージョンでは、
usestate?というものが使えないようで、

https://codepen.io/ashpwwqg/pen/BaaNXPq?editors=0111
の状態で上記の排他処理を実現することは可能でしょうか？

Answer 1

こんにちは

以下のようにすればよいかと思います。

class YourClassName extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: 0
    };
  }

  onButtonClick(selected) {
    this.setState({ selected });  
  }

  render() {
    return (      
      <section>
        {[...Array(3)].map((_, i) => (
        <YourDiv
          key={i}
          selected={this.state.selected == i+1}
          classes={['Other', 'Classes', 'button']}
          textContent={`ボタン${i+1}`}
          onClick={() => { this.onButtonClick(i+1); }}
        />
        ))}        
      </section>);
  }
}

class YourDiv extends React.Component {
  render() {
    const { classes, selected, onClick }  = this.props;
    classes.push(selected ? 'selected' : 'not-selected');
    return (
      <div className={classes.join(' ')} onClick={onClick}>
        {this.props.textContent}
      </div>
    );
  }
}

React.render(<YourClassName />, document.getElementById('app'));

ご質問に挙げられている CodePen をForkして上記のように修正したものが以下です。

• **動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/WNNQeGN?editors=0110

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

Comments

[cheche0830]

ありがとうございます！！！泣

すいません、
onClick={onClick}
は子コンポーネントから親のメソッドをたたいているということなのでしょうか？

今まで独自作ったコンポーネントに
onClickを設定してもうんともすんともはんのうしなかったもので、
こうすることで動くようになるということですかね？

[jun68ykt]

コメントありがとうございます。

> onClick={onClick}
は子コンポーネントから親のメソッドをたたいているということなのでしょうか？

はい。そうです。
どの子がselectedになっているかという情報は、親の state に入っています。それを変更するための this.setState　するメソッドを親に用意しておいて、それを子がクリックされたときに呼べるようにするために prop で onClick を渡します。

修正後のYourDivで注目頂きたいのは、 YourDiv のほうでは this.state を持つ必要がなくなって、propから渡される情報だけから render される（仮想）DOMが決まります。
React のバージョンがもうちょっと新しいと、このような、状態を持たないコンポーネントは
Functional Component
として書くことが推奨されています。

このご質問のように、一つの親と複数の子というパターンの場合、親だけがthis.state を持っていて、なるべく子は持たせないように作ろうと考えるのがよいかと思います。

[cheche0830]

ありがとうございます！！

ReferenceError: onClick is not defined

onClick={onClick}の部分で上記のエラーが本環境で出てしまうようで、
何か対策は可能でしょうか？

[cheche0830]

あ、すいません！キャッシュのようでした！
引き続き試します！ありがとうございました！

[jun68ykt]

どういたしまして！解決するといいですね。

[cheche0830]

classes.push(selected ? 'selected':'not-selected');

が、TypeError: classes is undefined
とでてしまうのですがこちらはプラグインなどでしょうか？

[jun68ykt]

実際のコードを拝見しないと、何ともいえないところではありますが、

> . classes.push(selected ? 'selected':'not-selected');

上記の行の
classes
は、私の書いたサンプルだと、子コンポーネントの render() で

const { classes, selected, onClick } = this.props;

という、分割代入によって得られるものです。
それが

TypeError: classes is undefined

というエラーになるのであれば、親コンポーネントのほうで、子コンポーネントを配置しているところで、子コンポーネントの props である classes が undefined になっているということかと思います。

私の書いたサンプルだと親コンポーネントのrender() で子コンポーネントは以下

<section>
{[...Array(3)].map((_, i) => (
<YourDiv
key={i}
selected={this.state.selected == i+1}
classes={['Other', 'Classes', 'button']}
textContent={`ボタン${i+1}`}
onClick={() => { this.onButtonClick(i+1); }}
/>
))}
</section>)

のように配列のリテラル
['Other', 'Classes', 'button']
をclasses に渡しているので
YourDiv 側で this.props.classes が undefined になることはないですが、cheche0830さんの本環境だと

classes={classNames}

のような感じで、変数で渡しているのではないでしょうか？であるとすれば、return する前の各所に

console.log(classNames)

を入れてみて、classes　として undefined ではない配列を渡せているはずが、 undefined になっている箇所を突き止める必要があるかと思います。

[cheche0830]

ありがとうございます！
console.logをいれて、無事エラーの箇所を特定することができました！
（子コンポーネントが複数散らばってまして、いくつかのコンポーネントに正しく属性が設定されていませんでした。。）

[jun68ykt]

どういたしまして。
> 無事エラーの箇所を特定することができました！
とのことで、よかったです????