Question

错误：React.createElement：类型无效，预期为字符串或类/函数，但得到：。您是否意外导出了JSX文字而不是组件？

class TestDynamic extends React.Component {

  getSpan(value) {
    return (<span>Spanned {value}</span>)
  }

  renderDynamicComponent() {
    const Test = this.getSpan(1)
    return (<div> <Test />  </span>)
  }

  render() {
    return (<div>{this.renderDynamicComponent() }</span>)
  }

}

我尝试使用return (<div>{ Test }</span>)它什么也不显示

Answer 1

与其将Test声明为普通类，不如将其从React.Component扩展并呈现为<Test />。同时将getSpan渲染为{Test1}并指定正确的关闭和打开标签

class TestDynamic extends React.Component{
    
      getSpan(value) {
        return (<span>Spanned {value}</span>)
      }
    
      renderDynamicComponent() {
        const Test = this.getSpan(1)
        return (<div> {Test}</div>)
      }
    
      render() {
        return (<div>{this.renderDynamicComponent() }</div>)
      }
    
    }
    
    ReactDOM.render(<TestDynamic />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

Answer 2

请访问渲染中的退货声明。它不应该是跨度。缺少div标签。看起来有些错字。

public class WrapperStackLayoutRenderer : VisualElementRenderer<StackLayout>
{
    public WrapperStackLayoutRenderer()
    {
        UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
        {
            if (Element != null)
            {
               Element.Margin = new Thickness(0, 0, 0, (args.FrameEnd.Height));
            }
        });

        UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
            }
        });
    }
}

React.createElement：类型无效，预期为字符串或类/函数，但得到：<div />

2 个答案: