Динамическое количество детей, родительская оркестровка с помощью useRef - PullRequest
Новая
       24

Динамическое количество детей, родительская оркестровка с помощью useRef

1 голос
/ 11 ноября 2019

У меня есть ловушка (useBout), которая генерирует один бой. Это может использоваться повторно и выводит массив элементов, в противном случае он выводит вспомогательные функции для запуска имитации / генерации / сброса этих элементов.

У меня есть компонент show, у которого есть другой хук (useShow), который будет просто хранитьid, массив выходных данных useBouts.

На родительском уровне я хотел бы определить массив схваток и иметь возможность отслеживать, какие из них завершены, чтобы я мог ввести бой по системе боя. Поэтому, когда один из дочерних компонентов запускает генерацию или моделирование, я бы хотел, чтобы шоу верхнего уровня было обновлено.

Исходный код: https://github.com/azz0r/fedsimulator/blob/master/src/pages/season/show/index.js

Упрощенный пример: 

    //show container
    export default function ShowContainer(id) {
      const [ boutAmount, setBoutAmount, ] = useState(randomIntFromInterval(boutMin, boutMax))
      const game = useSelector(getGame)
      const show = useShow()

      useEffect(() => {
        const existingShow = game?.shows.find(item => item.id === id)

        if (existingShow) {
          show.load(existingShow)
        } else {
          // no bouts exist, create empty array of the amount we need
          const bouts = new Array(boutAmount).fill({ id: getId(), })

          show.update({
            id,
            bouts,
          })
        }
      }, [ show.id, ])

      return <Show {...show} />
    }

    // show
    export default function Show({ bouts, }) {
      const boutsRef = useRef({})
      return (
        <React.Fragment>
            {bouts.map((item, index) =>
              <BoutContainer
                key={item.id}
                ref={boutsRef}
                order={index + 1}
                model={bouts[index]}
             />)}
        </React.Fragment>
      )
    }

    // bout
    export default function BoutContainer({ ref, model, order, }) {
      const bout = useBout()

      useEffect(() => {
        if (model) {
          bout.load(model)
        } else {
          bout.generate()
        }

         ref = bout
      }, [ brandId, model, ])

      const onReset = () => bout.reset()
      const onSimulate = () => bout.simulate()
      const onGenerate = () => bout.generate()

      return <BoutUI {...bout} onReset={onReset} onSimulate={onSimulate} onGenerate={onGenerate} />
}

Итак, мой вопрос;я могу отслеживать динамическое количество ссылок и синхронизировать ребенка до самого родителя?

...