2017-07-28 85 views
1

我是新來的React,所以我不知道我想要什麼是可能的。從生成的子組件中訪問父方法

考慮以下陣營組成:

export default class BBCode extends Component { 
    render() { 
    return (
     <div> 
     {parser.toReact(this.props.content.content)} 
     </div> 
    ) 
    } 
} 

我使用呈現包含BB代碼的HTML標籤,並在某些情況下反應的組分的字符串庫。這由功能{parser.toReact}完成。

我想通過由parser.toReact函數生成的任何組件訪問此組件中的方法。

有沒有辦法將一個道具傳遞給這個函數,然後將這個函數應用到生成的任何組件上?

+0

不'parse.toReact'返回一個字符串數組和/或反應成分? – nem035

回答

1

你可以附加額外的道具給React.cloneElement的孩子。假設parse.toReact返回一個字符串數組或反應的元素,你可以克隆的每個元素,並添加回調作爲一個額外的道具:

export default class BBCode extends Component { 
    render() { 
    // every React element will receive `myCustomCallback` as a prop 
    const elements = parser 
     .toReact(this.props.content.content) 
     .map(elem => React.isValidElement(elem) 
     ? React.cloneElement(elem, { 
      myCustomCallback: this.myCustomCallback 
      }) 
     : elem 
    ); 

    return (
     <div> 
     {elements} 
     </div> 
    ) 
    } 
} 
+0

超級有趣的方法,從來沒有考慮過這一點。現在就試試吧! – Squrler

+0

這很棒,適合我需要的東西。 React.cloneElement是否會帶來性能損失? – Squrler

+0

很高興幫助伴侶。至於你的問題:https://stackoverflow.com/questions/35616029/react-createelement-vs-cloneelement – nem035