Невозможно отобразить дочерние элементы в компоненте React

Question

Я вызываю компонент React с дочерними элементами так:

<SignUpFormWizard
          initialValues={initialFormValues}
          onSubmit={(values, props) => this._submit(values, props)}
        >
    <Text style={styles.lightText}>Wizard.</Text>
</SignUpFormWizard>

А мой SignUpFormWizard компонент выглядит так:

export default class SignUpFormWizard extends React.Component {
    // static Page = ({ children }) => children;

    constructor(props) {
        super(props);
        // console.log(props);
        this.state = { page: 0, values: props.initialValues };
    }

    render() {
        const { children } = this.props;
        console.log("Render");
        console.log(children);
        return <React.Fragment />;
    }
}

Однако всякий раз, когда я выполняю это, система просто на некоторое время зависает и заканчивается сообщением There was a problem sending log messages to your development environment.

Когда я пытаюсь выполнить рендеринг { children }, я получаю сообщение об ошибке: «1012 *.

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

Answer 1

Если вы хотите просто визуализировать children и все, тогда вы можете обновить SignUpFormWizard, чтобы он выглядел примерно так:

const SignUpFormWizard = ({ children }) => <>{children}</>;

export default SignUpFormWizard;

Поскольку вы вызываете компонент SignUpFormWizard, например:

<SignUpFormWizard
  initialValues={initialFormValues}
  onSubmit={(values, props) => this._submit(values, props)}
>
  <Text style={styles.lightText}>Wizard.</Text>
</SignUpFormWizard>

Полагаю, вам нужно прочитать initialValues и onSubmit что-то вроде:

const SignUpFormWizard = ({ children, initialValues, onSubmit }) => 
  <>
    {initialValues.map(value => (<div>{value}</div>))}
    {children}
    <button onClick={onSubmit}>Sign Up</button>
  </>;

export default SignUpFormWizard;