は、私は、複雑な状況で私のコンポーネントから私のデータを区切るするかどうかはわからない複雑なクラスメソッド

Question

にアクセスし、データ/コンポーネントの別離に反応：

const App = props => 
    <VideoGameContainerGroup tabbed searchable> 
    <VideoGame id="cool-game-22" name="Cool Game, part 22" genre="RTS"> 
     <CoolVideoGame /> {/* Implementation goes here */} 
    </VideoGame> 
    <VideoGame id="something-wild" name="Craziest game ever" genre="button"> 
     <div> 
     <h1>Some inline defined game-like component</h1> 
     <button>click me</button> 
     </div> 
    </VideoGame> 
    {/* ... more games .. */} 
    </VideoGameContainerGroup> 

： は、私はこのようなAPIを持つタブ付きのビデオゲームのコンテナを構築しています想像してみて

それはゲームの実装について知らない必要があるが、それは、インデックス、それらをできるよう、何とかゲームをラベル付けしたい、検索および他のいくつかのUIのものを実行します。

class VideoGame extends component { 
    getDynamicBio() { 
    return `Hi, I am game ${this.props.name} fom genre ${this.props.genre}`; 
    } 
    render() { 
    <div className="some-VideoGameContainer-boilerplate"> 
     {this.props.children /* implementation */} 
    </div> 
    } 
} 

class VideoGameContainerGroup extends Component { 
    render() { 
    return (
     <div> 
     <div className="all-games"> 
      {this.props.children} 
     </div> 
     {/* ... code, which through sub componentes resolve to: */} 
     <div className="SearchableGamesTabHeader"> 
      {React.Children.map(this.props.children, (game, i) => { 
       { /* but here I need access to complex class methods */} 
       <span>Game bio: {game.getDynamicBio()}</span> 
       { /* this won't work */ } 
      })} 
     </div> 
     </div> 
    ) 
    } 
} 

私はヘルパー関数の袋を輸出を検討しています例えば、

const getDynamicBio = (component) => 
    `Hi, I am game ${component.props.name} fom genre ${component.props.genre}` 

しかし、これらのメソッドはVideoGameコンテナとそのデータに結合されており、このようにアプローチするのは変です。

私が何かやって考えた：

<VideoGame videoGameData={ new VideoGameData({ id: 'cool-game-22', genre: 'RTS' }) }> 
    <GameImplementation /> 
</VideoGame> 

をそしてVideoGame.props.videoGameDataを介してデータにアクセスします。しかし、私の主張は、これは本当に間違っていると私に伝えます。

VideoGameは本当にすべてのメタデータを含むコンポーネントですが、オブジェクト指向のアプローチでは、そのクラスに関連するメソッドを保存します。どのように私はこれをReactで維持可能な方法で解決するでしょうか？

Answer 1

親の子コンポーネントメソッドには直接反応しません。あなたがそれを望むなら、このようなことをしてください。

class VideoGameContainerGroup extends Component { 
    render() { 
    return (
     <div> 
     <div className="all-games"> 
      {this.props.children} 
     </div> 
     {/* ... code, which through sub componentes resolve to: */} 
     <div className="SearchableGamesTabHeader"> 
      {React.Children.map(this.props.children, (ChildEl, i) => { 
       <ChildEl complexMethodAsCb = {()=>//pass in particular work you need to do say, on click} neededPropsInComplexMethod={...}/> 
        <span>Game bio: {game.getDynamicBio()}</span> 
       </ChildEl/> 
      })} 
     </div> 
     </div> 
    ) 
    } 
} 

したがって、私たちは反応の中からデータとメソッドをトリクルします。私たちは、親の中にある既知のデータやメソッドを、子どもや子供たちに、特定のメソッドの後/前に呼び出すことにします。

また、反応の中で、コンポーネントからすべてのデータ/メソッドを削除しようとします。これは、フラックスと呼ばれるパターンが入ってくる場所です。これをさらに読み、簡素化するためにreduxをチェックすることができます。