如何在React的所有孩子中調用函數

這就是我試過的。該文檔似乎說，this.props.children是由React管理的特殊屬性，但在此示例中未定義children。我究竟做錯了什麼？如何在React的所有孩子中調用函數

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資源管理器一樣在左側和右側的所有組的所有項目的列表組名接口。當我點擊左側的組名時，我想將右側的列表滾動到相應的項目。請注意，左側的組與右側的項目之間沒有內部連接。他們只是相同數據的兩個表示。爲了做我想做的事情，當左側單擊某個元素時，我希望找到右側的元素並詢問DOM在哪裏，以便設置滾動偏移量。我有足夠的信息來找到右側的元素，但是當我嘗試使用this.props.children對它們進行迭代時，我發現它未定義。在我的實際代碼

注意我沒有運行在componentDidMount這個代碼，該代碼被調用以響應鼠標點擊

所以我的第一個解決方法，通過在EventEmitter所有的孩子，那麼發出一個事件。道具中傳入的registerYourselfWithParent函數可能會很容易，但是您還需要unregisterYourselfWithParent。我猜6中1，1/2打的另一

來源

2016-11-04 gman

你不能通過'this.props.children'來訪問你的組件的孩子。 'this.props.children'指定父項傳遞給你的子項，而不是你在'render（）'中創建的子項。換句話說，呈現'ReactDOM.render（，document.getElementById（「react」））;'將記錄帶有內容的子節點「TEST」 – nem035

動態分配裁判像React.createElement(Child, {content: "child A", ref:getRef()}, null),你的子組件，其中getRef是一個功能

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(); 
     } 
    }); 
    }

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>

我希望它對你的事業有所幫助

來源

2016-11-04 08:29:00

如何在React的所有孩子中調用函數

回答

相關問題