标签: reactjs

我在创建 React 应用程序时遇到错误。我如何解决它？

我正在使用reactjs.

当我运行下面的代码时,浏览器会说:

未捕获的TypeError:超级表达式必须为null或函数,而不是未定义

任何有关错误的提示都将受到赞赏.

首先是用于编译代码的行:

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

和代码:

var React = require('react');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

更新:在这个问题上在地狱火中燃烧了三天后,我发现我没有使用最新版本的反应.

全球安装:

sudo npm install -g react@0.13.2

在本地安装:

npm install react@0.13.2

确保浏览器也使用正确的版本:

<script type="text/javascript" src="react-0.13.2.js"></script>

希望这可以拯救别人三天的宝贵生命.

我正在 React 中处理一个项目，但遇到了一个让我难倒的问题。

每当我运行时，yarn start我都会收到此错误：

类型错误 [ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。接收类型未定义

我不知道为什么会发生这种情况，如果有人遇到过这种情况，我将不胜感激。

每次创建新的 React 应用程序时都会出现此错误：

警告：ReactDOM.render 在 React 18 中不再支持。请改用 createRoot。在您切换到新 API 之前，您的应用程序的行为就像运行 React 17 一样。了解更多信息：https ://reactjs.org/link/switch-to-createroot

我该如何修复它？

我使用以下方法创建了我的 React 应用程序：

npx create-react-app my-app

我目前正在使用react router v4进行嵌套路由.

最接近的示例是React-Router v4文档中的路由配置 .

我想将我的应用程序拆分为两个不同的部分.

前端和管理区域.

我在考虑这样的事情:

<Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />

前端具有与管理区域不同的布局和样式.因此,在首页的路线回家,约一个应该是儿童路线.

/ home应该呈现在Frontpage组件中,而/ admin/home应该在Backend组件中呈现.

我尝试了一些变化,但我总是在没有击中/ home或/ admin/home.

编辑 - 19.04.2017

因为这篇文章现在有很多观点我用最终解决方案更新了它.我希望它对某人有帮助.

编辑 - 08.05.2017

删除旧解决方案

最终解决方案

这是我现在使用的最终解决方案.此示例还有一个全局错误组件,如传统的404页面.

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';

const Home = () => <div><h1>Home</h1></div>; …

我刚刚发现了Redux.一切看起来都不错.使用Redux over Flux是否有任何缺点,陷阱或妥协？谢谢

我正在尝试访问静态图像以backgroundImage在React中的内联属性中使用.不幸的是,我对如何做到这一点感到很沮丧.

一般来说,我认为你刚刚做了如下:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

这适用于<img>标签.有人可以解释两者之间的区别吗？

例:

<img src={ Background } /> 工作得很好.

谢谢!

我如何选择在JSX中包含一个元素？下面是一个使用横幅的示例,如果已经传入,该横幅应该在组件中.我想要避免的是必须在if语句中复制HTML标记.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

是否有内置的方法来使用proptypes来确保传递给组件的对象数组实际上是特定形状的对象数组？

也许是这样的？

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
})),

我错过了一些非常明显的东西吗？看起来像这样会受到高度追捧.

我遇到了 iframe 问题。直到今天，一切都按预期进行。今天我添加了一个非常简单的 Modal 组件，不知何故 iframe 开始出现。当我编辑文件并完成热重载时会出现它。此外，对于此问题，它在控制台中显示错误为“Uncaught ReferenceError：进程未定义”。有人可以帮我解决这个问题吗？

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import Close from "../static/assets/close-white.svg"

const trapStyles = {
    position: 'absolute',
    opacity: 0
}
const Test = () => {

    return ReactDOM.createPortal(
        <div data-react-modal-body-trap="" tabIndex="0" style={trapStyles}/>,
        document.getElementById("app")
    )
}

const Modal = ({ open, onClose, children }) => {

    useEffect(() => {

        if (open)document.getElementById("app").classList.add("ReactModal__Body--open");

        return () => {
            document.getElementById("app").classList.remove("ReactModal__Body--open")
        }
    })
    if (!open) return null

    return ReactDOM.createPortal(
        <>
            <Test />
            <div className="ReactModal__Overlay--after-open">
                <div className="modal-form-page" …