无法在 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 } 时，我收到一条错误消息，指出 Invariant Violation: Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {children}).。

我需要知道如何去做。基本上，这只是我想要实现的框架代码，即在 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;