web-dev-qa-db-ja.com

withRouter（）関数でラップされたreactコンポーネントに小道具を渡す

React-Routerv4を使用してReactアプリ内を移動しています。以下は、クリック時にルートを変更できるようにするためにwithRouter()関数でラップされたコンポーネントです。

_const LogoName = withRouter(({history, props}) => (
  <h1
    {...props}
    onClick={() => {history.Push('/')}}>
    BandMate
  </h1>
));
_

ご覧のとおり、propsをコンポーネントに渡します。これは、コンポーネントのクラスを変更するために必要です。ここでの問題は、propsが_<LogoName>_コンポーネントのundefinedであるということです。次のように、別のコンポーネントをクリックしたときに、このコンポーネントのクラスを変更できるようにする必要があります。

_<LogoName className={this.state.searchOpen ? "hidden" : ""} />
<div id="search-container">
  <SearchIcon
    onClick={this.handleClick}
    className={this.state.searchOpen ? "active" : ""} />
  <SearchBar className={this.state.searchOpen ? "active" : ""}/>
</div>
_

これが私がクリックを処理する方法です。基本的には状態を設定するだけです。

_constructor(){
  super();
  this.state = {
    searchOpen: false
  }
}

handleClick = () => {
  this.setState( {searchOpen: !this.state.searchOpen} );
}
_

withRouter()関数内にラップされているコンポーネントにpropsを渡す方法はありますか、それともReact-Routerでナビゲートする機能を持つコンポーネントを作成する同様の方法がありますか？それでも小道具を受け取りますか？

前もって感謝します。

javascriptreactjsreact-router-v4
6
martin36

問題は、破壊している間、あなたはdestructure propsしかし、propsという名前の小道具をLogoNameコンポーネントに渡していない

あなたはあなたの議論をに変えることができます

const LogoName = withRouter((props) => (
  <h1
    {...props}
    onClick={() => {props.history.Push('/')}}>
    BandMate
  </h1>
));

ただし、@ Dannyのような小道具は、次のようなスプレッド演算子構文を使用して分解することもできます。

const LogoName = withRouter(({history, ...props}) => (
  <h1
    {...props}
    onClick={() => {history.Push('/')}}>
    BandMate
  </h1>
));
10
Shubham Khatri

あなたは近くにいます、あなたの関数シグネチャにも小道具を広げてください：

const LogoName = withRouter(({ history, ...props }) => (
  <h1
    {...props}
    onClick={() => {history.Push('/')}}>
    BandMate
  </h1>
));
3
Danny Delott