2017-04-27 15 views
1

子コンポーネントでアクションを使用する場合、子コンポーネントElementは接続されていませんでした。子コンポーネントとして自己コンポーネントを使用するとreduxが接続されます

どのように接続しますか?

コード:

import { connect } from 'react-redux'; 
import * as actions from '../actions'; 

class Element extends React.Component { 
    constructor(props) { 
     super(props); 
    } 


    render() { 
     let { children } = props.el.children; 
     return (
      <div> 
       { children ? 
        children.map(el => 
         <Element key={ 'el-' + el.id } el={ el } /> 
        ) 
        : 
        null 
       } 
      </div> 
     ) 
    } 
} 

Element = connect(
    null 
    , 
    actions 
)(Element); 

export default Element; 
+0

'Element'はそれを自己表現しますか? –

+0

@ Sag1v edited.Itは子をレンダリングします( 'Element'と同じです)。 – azlar

+0

それでもそれはそれ自身をレンダリングします。 'Element'のレンダリング関数の中にいて、' 'をレンダリングしています。子をレンダリングしたいだけなら 'render'関数で'

{this.props.children}
'を実行してください –

答えて

0

あなたがそれ自身のrender関数内<Elemnt />をレンダリングしています。

あなたは自分のElementコンポーネントのrender機能ダウン子供を渡したい場合は、ちょうどこのように変更します。現在のバージョンのみが許可する1つのトップを反応させるためのラッパー<div>があることが

import { connect } from 'react-redux'; 
import * as actions from '../actions'; 

    class Element extends React.Component { 
     constructor(props) { 
      super(props); 
     } 

     render() { 
      return (
       <div> 
        { this.props.children } 
       </div> 
      ) 
     } 
    } 

    Element = connect(
     null 
     , 
     actions 
    )(Element); 

    export default Element; 

は注意レンダリング本体内のレベル要素であり、this.props.childrenは複数のelementを保持できます。