我正在嘗試創建一個組件，其中某些 HTMLElements 或 ReactComponents 被傳遞給它，如下所示：
<ContentList>
<span>Hi</span> // Passed child No. 1
<span>Hi2</span> // Passed child No. 2
<CustomComponent prop1={}></CustomComponent> // Passed child No. 3
</ContentList>
然后，它會將傳遞的子項渲染到此結構中：
render() {
let content: React.ReactNode = this.props.children;
//----------------------
//Desired Process goes here
//----------------------
return (
<>
<section className={styles.list}></section>
<section className={styles.contentPanel}></section>
</>
);
}
第一部分應該是內容串列，第二部分將是呈現的 ReactComponents 和 HTMLElements。我的問題是我應該如何使用 props.children（又名內容）作為陣列？我試圖在網上搜索它，但那里沒有可靠的指南。基本上我想做這樣的事情：
let content: React.ReactNode = this.props.children;
// Creating relevant anchor for each content
let list = content.map((child, i) => {
return (<a className="content-link" href={"#" child.id}>{child.title}</a>)
});
// Rendering each content after wrapping them inside proper div
let contents = content.map((child, i) => {
return (<div className="content">{child}</div>)
});
return (
<>
<section className={styles.list}>{list}</section>
<section className={styles.contentPanel}>{contents}</section>
</>
);
uj5u.com熱心網友回復：
class App(){
// Creating relevant anchor for each content
function list(){
return this.props.children.map((child, i) => {
return (<a className="content-link" href={"#" child.id}>{child.title} </a>)
});
}
// Rendering each content after wrapping them inside proper div
function contents(){
return this.props.children.map(...)
}
render() {
return (
<>
<section className={styles.list}>{list()}</section>
<section className={styles.contentPanel}>{contents()}</section>
</>
)
}
}
uj5u.com熱心網友回復：
Typescript 編譯器對宣告和賦值中的變數型別非常嚴格，但我設法通過以下程序使其作業：
render() {
let content: React.ReactNode = this.props.children;
let list: Array<JSX.Element> = [], // #1
contents: Array<JSX.Element> = []; // #1
if (this.props.children !== undefined && this.props.children !== null) {
if (Array.isArray(content)) {
let arr: Array<any> = content; // #2
list = arr.map((child, i) => {
return (
<a
className={styles.contentAnchor}
href={"#content_" child.props.id}
>
{child.props.title}
</a>
);
});
contents = arr.map((child, i) => {
return (
<div
id={"content_" child.props.id}
className={styles.contentWrapper}
>
{child}
</div>
);
});
}
}
return (
<>
<section className={styles.list}>{list}</section>
<section className={styles.contentPanel}>{contents}</section>
</>
);
}
從一開始就缺少的實際關鍵行是我標記的那些#
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403076.html
標籤：