React Render prop с Children в функциональном компоненте с использованием State Hook - PullRequest
Новая
       11

React Render prop с Children в функциональном компоненте с использованием State Hook

0 голосов
/ 26 января 2019

Я использую Create-React-App через Codesandbox, используя версии с поддержкой ловушек. Я пытаюсь создать простой переключатель, используя новые параметры React функциональных компонентов без сохранения состояния и хуков. Я создал шаблон renderprop, используя детей prop, но получаю сообщение «children is not error». Профессор Google подвел меня.

App.js 

import React from "react";
import ReactDOM from "react-dom";
import Toggle from "./Toggle";
import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Toggle>
        <Toggle>
          {({ show, toggleShow }) => (
            <div>
              {show && <h1>Show Me</h1>}
              <button onClick={toggleShow}>Show / Hide</button>
            </div>
          )}
        </Toggle>
      </Toggle>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

и Toggle.js 

import { useState } from "react";

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  return children({ show, toggleShow });
};

export default Toggle;

CodeSandbox

1 Ответ

0 голосов
/ 26 января 2019 
<Toggle>
   <Toggle>

Внешний Toggle имеет в качестве children еще один компонент Toggle, так что именно здесь выдается исключение.Внутренний Toggle будет в порядке, поскольку его children действительно является функцией, но исключение не позволяет рендерингу попасть туда.

Я не совсем уверен, какова ваша цель - вложить Toggles в переключатели, поэтому, возможно,исправить это просто удалить один из них.В качестве альтернативы, если вы хотите разрешить использование не-функций в качестве дочерних, вы можете изменить свой компонент Toggle на что-то вроде этого: 

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  if (typeof children === 'function') {
    return children({ show, toggleShow });
  }
  return children;
};
...