Question

如果我有一个通用的构成部分,它将在一段时期向任意儿童部分提供某种推进剂,例如:

const GenericComponent = <T extends {id: string}>(props: {fetch: () => T, child: React.ReactElement}) => {
  const {id} = props.fetch()
  return (
    <div>{ props.child }</div>    // <------------- how to pass in argument here?
  )
}

with a child component that looks like this:

const PassedInComponent = (props: {id: string}) => {
  return (
    <div>{props.id}</div>
  )
}

实现这一目标的最佳途径是什么?

从诸如idpropiprops>propis-children,然后用通用部分的新论点加以 clo:

<GenericComponent fetch={...} child={<PassedInComponent id={""} />} /> // <--- empty id prop passed in here


const GenericComponent = <T extends {id: string}>(props: {fetch: () => T, child: React.ReactElement}) => {
  const {id} = props.fetch()
  return (
    <div>{ React.cloneElement(props.child, {id: id}) }</div> // <---- can clone the element and pass in new arguments like this
  )
}

这个例子颇具争议,但不幸的是,由于其他制约因素,我不得不处理这一设想。

我的问题是:向儿童部分提供一只好战推进剂,然后是穿透剂。衣着内容似乎很差。是否有更好的途径来实现这一目标?

Answer 1

你只能把职能部分本身作为推进剂。

const PassedInComponent: React.FC<{id: string}> = ({id}) => <div>{id}</div>;
const GenericComponent = <T extends {id: string}>(props: {fetch: () => T, child: React.FC<T>}) => {
  const {id} = props.fetch(), ChildComp = props.child;
  return (
    <div><ChildComp id={id} /></div>
  )
}

实例:

<GenericComponent fetch={...} child={PassedInComponent} />

Answer 2

The correct way would be to create a utility function for the fetching, and do the fetch on the parent component, then finally pass it down to the children component
There is an easier way to pass the child component, but it doesn t apply to the solution to your problem.

这里是解释守则评论的理想办法。

// use whatever fetching library as you see fit
// an utility function
const getBatchData = axios.get( some.url )... // complete implementation here

const GenericComponent = () => {
  const [fetchData, setFetchData] = useState()
  useEffect(() => {
    const doFetch = async () => {
      const result = await getBatchData() // fetch data in parent component
      setFetchData(result)
    }
    doFetch()
  }, [])

  if (!fetchData) return <></>

  // instead of passing `fetch` props, do it in parent and pass them to the children
  return (
    <div>
      {fetchData.map((data) => {
        return <PassedInComponent passInData={data} /> 
      })}
    </div> // assume fetchData
  )
}

总的来说,如果数据准备用于建立家庭调查,你就希望将这一组成部分称为,因此,儿童组成部分的提供减少。

友情链接