我有一個呈現資料結構的組件。我正在嘗試為該結構創建一個編輯器，并希望使用相同的渲染器，但覆寫了某些子組件。渲染器有一些我想傳遞給子組件的資料，所以我認為最好使用一個傳遞的類，渲染器可以呼叫它并將資料作為道具包含在內。大致如下：
class Editor extends React.Component{
render(){
return <Renderer overrideClass={OverridenComponent}/>;
}
}
class Renderer extends React.Component{
render(){
return <this.props.overrideClass importantData="TEST"/>;
}
}
class OverriddenComponent extends React.Component{
render(){
return <div>{this.props.importantData}</div>;
}
}
我希望創建一個<Editor/>會導致<div>TEST</div>DOM，但相反，我得到了與 等效的東西<overridencomponent></overridencomponent>，特別是非大寫且沒有內容。
是否以某種方式支持這種行為？有沒有更好的方法來完成這種可覆寫的內容，同時仍然允許 Renderer 類將資料傳遞給被覆寫的版本？
uj5u.com熱心網友回復：
JSX 僅呈現名稱大寫的組件。因此，您應該將覆寫類保存到一個大寫的變數中。
嘗試：
class Editor extends React.Component{
render(){
return <Renderer overrideClass={OverridenComponent}/>;
}
}
class Renderer extends React.Component{
render(){
const Component = this.props.overrideClass
return <Component importantData="TEST"/>;
}
}
class OverriddenComponent extends React.Component{
render(){
return <div>{this.props.importantData}</div>;
}
}
uj5u.com熱心網友回復：
除了上面標記的答案之外，我發現傳入一個接受道具并回傳類實體的回呼函式也是有效的。它看起來像：
class Editor extends React.Component{
render(){
return <Renderer overrideClass={(importantData) =>
<OverridenComponent importantData={importantData}/>}
/>;
}
}
class Renderer extends React.Component{
render(){
return this.props.overrideClass("TEST");
}
}
class OverriddenComponent extends React.Component{
render(){
return <div>{this.props.importantData}</div>;
}
}
我不確定哪種方法更好，但他的回答更接近于我在通過課程方面的實際要求。我懷疑他的方式也更靈活。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338064.html
標籤：反应
上一篇：在ReactJS中迭代物件
下一篇：影片不適用于React組件