Question

我不完全确定我的应用程序出了什么问题。我正在使用create-react-app，我试图将所有组件渲染到相应的根div中。问题是，我能够将所有组件渲染到页面上，除了最后一个组件，即Score组件。我甚至尝试将该组件投入div中，我仍然遇到以下问题：

＆＃39; React.Children.only希望收到一个React元素孩子＆＃39;。

这究竟是什么意思？

这是我的App.js结构。

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

 function Score(props) {

 return (
 <div>
 <CSSTransitionGroup 
  className="container result"
  transitionName="test"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
 >
  <div>
    You prefer <strong>{props.testScore}</strong>!
  </div>
</CSSTransitionGroup>
</div>
);

 }

 Score.propTypes = {
 quizResult: PropTypes.string,
 };

 export default Score;

Score.js的内容

internalType = new TypeDefinition(
                "", "InternalClass",
                TypeAttributes.NestedPrivate,
                module.Import(typeof(object)));

type.NestedTypes.Add(internalType);

Answer 1

来自react-transition-group documentation：

您必须为CSSTransitionGroup的所有子项提供键属性，即使只渲染单个项目也是如此。这就是React将如何确定哪些孩子已进入，离开或留下。

请为您在转换组中呈现的组件添加一个键，即使是静态键：

    with FDScript.SQLScripts do begin
      Clear;
      with Add do begin
        Name := 'root';
        SQL.Add('@drop_tables');
        SQL.Add('@first_script');
        SQL.Add('@second_script');
        SQL.Add('@third_script');
        SQL.Add('@last_script');

        SQL.Add('@');  // Added this -> see below
      end;
      with Add do begin
        Name := 'drop_tables';
        SQL.Add('drop TABLE T1;');
        SQL.Add('drop TABLE T2;');
        SQL.Add('drop TABLE T3;');
        SQL.Add('drop TABLE T4;');
      end;
      with Add do begin
        Name := 'first_script';
        SQL.Add('CREATE TABLE T1 (ID INTEGER NOT NULL, NAME VARCHAR(50), CREATED TIMESTAMP);');
        SQL.Add('CREATE TABLE T2 (ID INTEGER NOT NULL, NAME VARCHAR(50), CREATED TIMESTAMP);');
      end;
      with Add do begin
        Name := 'second_script';
        SQL.Add('CREATE TABLE T3 (ID INTEGER NOT NULL, NAME VARCHAR(50), CREATED TIMESTAMP);');
        SQL.Add('CREATE TABLE T4 (ID INTEGER NOT NULL, NAME VARCHAR(50), CREATED TIMESTAMP);');
      end;
      with Add do begin
        Name := 'third_script';
        SQL.Add(Format('INSERT INTO T1 (ID, NAME) VALUES(%d, %s);', [ 1, '''fabio''']));
      end;
      with Add do begin
        Name := 'last_script';
        SQL.Add(Format('INSERT INTO T1 (ID, NAME) VALUES(%d, %s);', [ 2, '''stefano''']));
      end;

      with Add do begin  // addes this (see above)
        Name := '';      // please note the empty '' Name
      end;               // 

    end;

    FDScript.ValidateAll;
    FDScript.ExecuteAll;

Answer 2

re_path(r'^test_view/(?P<mode>\w+)/(?:blog-(?P<blog_id>\d+)/)?$', views.test_view, name='test_view')

此错误“错误React.Children.only仅预期接收单个React元素子级”的根本原因是，在JSX代码的末尾有两个“>”。删除其中一个解决问题的“>”。

Answer 3

我在使用 CSS Transitions 时遇到了同样的错误。对我有用的是使用这些 React 标签：<></> 来包裹 css 转换标签内的标签。

注意我在 TransitionGroup 和 CSSTransition 标签中有两个标签，如下所示：

 <TransitionGroup>
       <CSSTransition key={quotesArr[active]}>
          <>
            <p>{current.quote}</p>
            <h2>{current.client}</h2>
          </>
       </CSSTransition>
  </TransitionGroup>

错误React.Children.only期望收到一个React元素子元素

3 个答案: