State 未傳遞給子組件

Question

我在確定樹不傳遞道具的條件下存在問題。 我有一個 Fetcher class 在其中填充“布局”，然后將其傳遞給子道具，但我無法從子組件訪問它。

前任：

   import React, { Component } from 'react'
   import axios from "axios";

    export default class Fetcher extends Component {

constructor(props) {
    super(props)
    this.state = {
        layouts: [],
}

componentDidMount() {
    this.getLayouts();
}

getLayouts = () => {
    axios
        .get("/layout")
        .then((res) => {
            this.setState({
                layouts: res.data,
            });
        })
        .catch((err) => console.log(err));
};

render() {
    return (

        this.props.children(this.state.layouts)
    )
}

}

這是我的 Parent 組件，我在其上傳遞了一些 props 子組件：

前任：

 import React, { Fragment } from "react";
 import Fetcher from "./Fetcher";

 class App extends Component {

          <Fetcher>
            {(layouts) => {
              return <Fragment>
                <NewLayout
                  layoutsList={layouts} />
              </Fragment>
            }}
          </Fetcher>
 }







 import React from "react";



 class NewLayout extends React.Component {


 constructor(props) {
  super(props)
  this.state = {

  layouts: [],
  }}

 componentDidMount() {
  this.setState(() => ({
    layouts: this.props.layoutList
  }))
 }


   render() {

  { console.log(this.state.layouts) }
  { console.log(this.props.layoutList) }


  return (
   ....

Answer 1

children道具不是 function ，如果你想將屬性傳遞給它，你應該使用React.Children API 和React.cloneElement ：

class Fetcher extends Component {
  state = {
    layouts: [/*some layout values*/],
  };

  render() {
    const children = this.props.children;
    const layouts = this.state.layouts;
    return React.Children.map(children, (child) =>
      React.cloneElement(child, { layouts })
    );
  }
}

Answer 2

錯字我的朋友，看起來您將layoutsList道具傳遞給NewLayout ，但在內部使用layoutList 。