Reactのすべての子どもたちの機能を呼び出す方法

Question

これは私が試みたものです。ドキュメントでは、this.props.childrenはReactによって管理される特別なプロパティですが、childrenはこの例では定義されていませんと言われています。私は間違って何をしていますか？

class Child extends React.Component { 
 
    render() { 
 
    return React.createElement('div', {}, this.props.content); 
 
    }  
 
    someFunc() { 
 
    log("child", this.props.content); 
 
    } 
 
} 
 
      
 
class Parent extends React.Component { 
 
    render() { 
 
    return React.createElement('div', {ref: 'self'}, 
 
     React.createElement(Child, {content: "child A"}, null), 
 
     React.createElement(Child, {content: "child B"}, null), 
 
     React.createElement(Child, {content: "child C"}, null) 
 
    ); 
 
    } 
 
    componentDidMount() { 
 
    console.log("children:", this.props.children);  
 
    React.Children.forEach(this.props.children, (child) => { 
 
     log("child"); 
 
     child.someFunc(); 
 
    }); 
 
    } 
 
} 
 
      
 
ReactDOM.render(<Parent />, document.getElementById("react")); 
 

 
function log(...args) { 
 
    const elem = document.createElement("pre"); 
 
    elem.textContent = [...args].join(" "); 
 
    document.getElementById("log").appendChild(elem); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="react"></div> 
 
<div id="log"></div>

私が解決しようとしている特定の問題は、私は左と右の上のすべてのグループのすべての項目のリストにグループ名とのインタフェースのように、Windowsエクスプローラを持っています。左側のグループ名をクリックすると、右側のリストを対応する項目にスクロールします。左のグループと右のグループの間には内部接続はありません。それらは同じデータの2つの表現です。私がやりたいことをするために、要素が左にクリックされたときに、要素を右に見つけてDOMに質問してスクロールオフセットを設定することを望んでいました。私は右の要素を見つけるのに十分な情報を持っていますが、this.props.childrenを使ってそれらを反復しようとすると、定義されていません。私はcomponentDidMountでこのコードを実行していないよ、私の実際のコードで

注意、コードはマウスに対応して呼び出され、その後、すべての子どもたちに持つEventEmitterに渡すので、私の最初の回避策

---

をクリックしてくださいイベントを発行する。 registerYourselfWithParent関数が小道具で渡されるのと同じくらい簡単にできますが、それでもunregisterYourselfWithParentが必要です。私は別の

Answer 1

の1の6、1/2ダースが動的に

var getRef = function(){ return 'Child-'+(refi++); } 

、その後Object.keys(this.refs).forEach()

componentDidMount() { 

    Object.keys(this.refs).forEach((child) => { 
     if(child !== 'self') { 
     console.log(child); 
     this.refs[child].someFunc(); 
     } 
    }); 
    } 

を使用して、参考文献をループとしてgetRefが関数である React.createElement(Child, {content: "child A", ref:getRef()}, null),のようなあなたの子コンポーネントへのREFを割り当てると思います

class Child extends React.Component { 
 
    render() { 
 
    return React.createElement('div', {}, this.props.content); 
 
    }  
 
    someFunc() { 
 
    console.log("child", this.props.content); 
 
    } 
 
} 
 
      
 
class Parent extends React.Component { 
 
    
 
    render() { 
 
    var getRef = function(){ return 'Child-'+(refi++); }, refi=0; 
 
    
 
    return React.createElement('div', {ref: 'self'}, 
 
     React.createElement(Child, {content: "child A", ref:getRef()}, null), 
 
     React.createElement(Child, {content: "child B", ref: getRef()}, null), 
 
     React.createElement(Child, {content: "child C", ref:getRef()}, null) 
 
    ); 
 
    } 
 
    componentDidMount() { 
 
      
 
    Object.keys(this.refs).forEach((child) => { 
 
     if(child !== 'self') { 
 
     console.log(child); 
 
     this.refs[child].someFunc(); 
 
     } 
 
    }); 
 
    } 
 
} 
 
      
 
ReactDOM.render(<Parent />, document.getElementById("react")); 
 

 
function log(...args) { 
 
    const elem = document.createElement("pre"); 
 
    elem.textContent = [...args].join(" "); 
 
    document.getElementById("log").appendChild(elem); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="react"></div> 
 
<div id="log"></div>

私はそれがあなたの助けになることを願っています