reactjs - ReactNode'u diziye nasıl dönüştürürsünüz?

Buna benzer şekilde belirli HTMLElements veya ReactComponents'in aktarıldığı bir bileşen oluşturmaya çalışıyorum:

<ContentList>
   <span>Hi</span> // Passed child No. 1
   <span>Hi2</span> // Passed child No. 2
   <CustomComponent prop1={}></CustomComponent> // Passed child No. 3
</ContentList>

Sonra, geçirilen çocukları bu yapının içine yerleştirecek:

render() {
    let content: React.ReactNode = this.props.children;
    //----------------------
    //Desired Process goes here
    //----------------------
    return (
      <>
        <section className={styles.list}></section>
        <section className={styles.contentPanel}></section>
      </>
    );
}

İlk bölümün bir içerik listesi olması ve ikinci bölümün render edilmiş ReactBileşenleri ve HTMLElementleri olması gerekiyor. Benim sorum props.children (yani içerik) ile bir dizi olarak nasıl çalışmam gerekiyor? Bunu internette aramaya çalıştım ama sağlam bir rehber yok. Temelde bunu yapmak istiyorum:

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>
  </>
);

Cevap #1

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>
      </>
    )
  }
}

Cevap #2

Typescript derleyicisi değişken türü deklarasyonu ve atamasında çok katıdır ancak bunu aşağıdaki süreçle çalıştırmayı başardım:

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)) { // #2
      let arr: Array<any> = content; // #3
      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>
    </>
  );
}

Başlangıçta eksik olan aslında anahtar satırlar, benim # ile işaretlediğim satırlardır