メソッドへのReactコンポーネントインターフェイス

Question

Q：特定の再利用可能なコンポーネントからパブリックメソッドにアクセスするインターフェイスを提供する方法はありますか？

シナリオ：Tabsコンポーネントをビルドしているとします。

<App> 
    <Tabs /> 
    <button id="previous">Previous</button> 
    <button id="next">Next</button> 
</App> 

あなたが前または次のタブのペインに移動、Tabsコンポーネントと対話すべき二つのボタンがある見ることができるように：それはAppと呼ばれ、親コンポーネント内に位置しています。

export default class Tabs extends React.Component { 
    next() {} 
    previous() {} 
} 

Q：

私の実装はTabsコンポーネント内next()とprevious()方法を維持することにあるどのように私はAppコンポーネント内のこれらのボタンにnext()とprevious()方法をバインドすることができますか？ Tabsコンポーネントで公開されているインタフェースを作成することはできますか？ とは何ですか？とはきれいですそうする方法はありますか？

編集1：...

編集2：Tabsは "再利用可能" なコンポーネントです。多くのアプリケーションは内部でそれをレンダリングできます。

Answer 1

あなたのボタンがあなたのTabsコンポーネントの外にあることは他の人からもわかりません。

コードサンプルの表示方法は、AppコンポーネントがTabsコンポーネントである必要があります。TabsコンポーネントがTabsViewのようなものを代表すると仮定します。

app.js

import Tabs from './components/tabs'; 

<App> 
    <Tabs/> 
</App> 

tabs.js

class TabsView extends Component { 
    constructor(props){ 
    super(props); 
    } 
    render(){ 
    return(
     <span>{this.props.currentTab}</span> 
    ); 
    } 
} 

class Tabs extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     currentTab: 0 
    } 
    } 
    handleOnClickPrev(){ 
    this.setState({currentTab: currentTab--}); 
    } 
    handleOnClickNext(){ 
    this.setState({currentTab: currentTab++}); 
    } 

    render(){ 
    return(
     <div> 
     <TabsView currentTab={this.state.currentTab}/> 
     <button id="prev" onClick={handleOnClickPrev.bind(this)}>-</button> 
     <button id="next" onClick={handleOnClickNext.bind(this)}>+</button> 
     </div> 
    ); 
    } 
} 

export default Tabs; 

この方法で、その中にあなたのコンポーネントの人生のすべての機能。 Tabsコンポーネントには、必要なすべての情報が含まれています。それぞれのTabsコンポーネントには独自の状態とタブがあります。現在のタブ状態がAppから来て、他の場所でこの同じcurrentTabをレンダリングできるようにするには、Appコンポーネントから小道具として渡すことができます。

app.js

<App> 
    <Tabs currentTab={this.state.currentTab} handlePrev={} handleNext={}/> 
</App> 

tabs.js

class Tabs extends Component { 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    return(
     <div> 
     <TabsView currentTab={this.props.currentTab}/> 
     <button id="prev" onClick={this.props.handlePrev}>-</button> 
     <button id="next" onClick={this.props.handleNext}>+</button> 
     </div> 
    ); 
    } 
} 

export default Tabs; 

あなたが他の場所でボタン特定の場所にタブを表示するために探していない場合は、使用することができますTabsViewコンポーネントは、Tabsコンポーネントに渡す同じ小道具を使用しています。

app.js

<App> 
    <Tabs currentTab={this.state.currentTab} handlePrev={} handleNext={}/> 
    <TabsView currentTab={this.state.currentTab} /> 
</App> 

あなたがコンポーネント自体よりも、別の場所でのライブのコンポーネントのためにあなたのコントロールを持つのは本当に暴勇している場合は、私は両方のTabsViewまで同じ小道具を渡すことを示唆しているとボタン。

app.js

handlePrev() { 
    this.setState({ currentTab: this.state.currentTab - 1 }) 
} 
handleNext(){ 
    ... 
} 
render(){ 
    return (
    <App> 
     <TabsView currentTab={this.state.currentTab} /> 
     <button id="prev" onClick={this.handlePrev.bind(this)}>-</button> 
     <button id="next" onClick={this.handleNext.bind(this)}>+</button> 
    </App> 
) 
} 

私はあなたがこの時点でReduxのか、他の状態のライブラリを導入することは理にかなっているとは思いません。あなたのタブコンポーネントのためだけにグローバル状態を管理することは大変です。

Answer 2

ボタンがTabコンポーネントの要素に作用する場合、これらのボタンはこのコンポーネントの内側にある必要があります。 ButtonのonPress小道具を使用して、コンポーネントのstateを簡単に変更することができます。

あなたはまだ（私はそののための明確な理由が表示されていない場合でも）コンポーネントの外側で、あなたのボタンを維持したい場合、あなたは全体の「グローバル」状態を維持するためにReduxのような店を使用して検討すべきですあなたのコンポーネント。

Answer 3

あなたはrefは、親コンポーネント

class Root extends Component { 

    render() { 
    return (
    <App> 
     <Tabs ref={ref => this.tabs = ref} /> 
     <button id="previous" onClick={() => this.tabs.prev()}>Previous</button> 
     <button id="next" onClick={() => this.tabs.next()}>Next</button> 
    </App> 
    ) 
    } 
} 

以上reasonbleアプローチは、フラックスを言ういくつかの集中状態管理ソリューションに切り替えることであろうに、インスタンスをタブに得ることができました。 Redux :)を見てください。