个人中心
gpt4 book ai didi

javascript - 在 React-Bootstrap 中动态生成组件

转载 作者：行者123 更新时间：2023-11-30 17:20:57 25 4
gpt4 key购买 nike

我正在尝试通过实例化来自 Javascript 类的组件，在运行时在 React-Bootstrap 中动态生成警报组件。我这样做是因为有很多警报要显示，而且 Javascript 类创建起来更简洁。

我的尝试没有奏效。我不确定这个问题是普遍适用于 React 还是仅适用于 React-Bootstrap。但是在react.js中出现错误，抛出如下:

TypeError: undefined is not a function

抛出发生在以下 JSX 文件中的 alert.getComponent() 调用中:

/** @jsx React.DOM */

var Alert = ReactBootstrap.Alert;

var AlertDismissible = React.createClass({
    getInitialState: function() {
        return {
            isVisible: true
        };
    },

    render: function() {
        if(!this.state.isVisible)
            return null;

        var message = this.props.message;
        if(this.props.code !== null)
            message = message +'(Code '+ this.props.code +')';
        return (
            <Alert bsStyle={this.props.level} onDismiss={this.dismissAlert}>
                <p>{message}</p>
            </Alert>
        );
    },

    dismissAlert: function() {
        this.setState({isVisible: false});
    }
});

function AlertNotice(level, message, code) {
    this.level = level;
    this.message = message;
    this.code = code || null;
}

AlertNotice.prototype.getComponent = function() {
    // What should go here? Using React.createClass() doesn't help
    return (
        <AlertDismissible level={this.level} message={this.message}
                code={this.code} />
    );
};

function SuccessAlert(message) {
    AlertNotice.call(this, 'success', message);
}
SuccessAlert.prototype = Object.create(AlertNotice);
SuccessAlert.prototype.constructor = SuccessAlert;

/* ...more kinds of alerts... */

function ErrorAlert(message, code) {
    AlertNotice.call(this, 'danger', message, code);
}
ErrorAlert.prototype = Object.create(AlertNotice);
ErrorAlert.prototype.constructor = ErrorAlert;

var SomethingWithAlerts = React.createClass({
    render: function() {
        var alerts = [
            new ErrorAlert("Goof #1", 123),
            new ErrorAlert("Goof #2", 321)
        ].map(function(alert) {
            // react.js throws "TypeError: undefined is not a function"
            return alert.getComponent();
        });
        return (
            <div>{alerts}</div>
        );
    }
});

var TestComponent = (
    <div>
        <SomethingWithAlerts />
    </div>
);

React.renderComponent(
  TestComponent,
  document.getElementById('content')
);

Alert 组件来自 React-Bootstrap 库。 div 组件看起来无关紧要，但我发现它们是满足 React 框架所必需的。实际上，我将以 react 状态存储 AlertNotice 实例，然后从它们生成 react 节点。

解决这个问题的正确方法是什么？

这是一个提示。如果我将 return alert.getComponent(); 替换为以下硬编码警报，AlertDismissible 组件呈现时没有错误(重复)，但我收到警告:

return (
    <AlertDismissible level="danger" message="Goof" code="777" />
);

以下是我通过上述替换获得的警告消息，包括一个链接，该链接解释了我应该为每个警报将 key= 设置为唯一:

Each child in an array should have a unique "key" prop. Check the render method
of SpecimenSetManager. See http://fb.me/react-warning-keys for more information.

但是，如果我只是用上面的硬编码警报替换 AlertNotice.prototype.getComponent 中的代码，我会得到与以前相同的 TypeError 消息。

为了完整起见，这是我的 HTML 源代码。这是 react 和 react-boostrap v0.11.1

<html>
  <head>
    <script src="lib/react.js"></script>
    <script src="lib/react-bootstrap.js"></script>
    <script src="lib/JSXTransformer.js"></script>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div id="content"></div>
    <script src="components.js" type="text/jsx"></script>
  </body>
</html>

最佳答案

我解决了这个问题。解决方案是创建一个特殊的 react 组件来表示一组警报。显然，只能从 React.createClass() 定义中引用组件参数中的自动变量或对象变量。也许这是 JSX 的句法约束，而不是 React 的逻辑约束。

我不明白为什么这个解决方案有效。我想明白了，这样我以后就不用再处理类似的问题了。如果你能解释我违反的一般原则和应该遵循的一般原则——比我在这里所说的更有见地——那么我会将你的回答标记为这个问题的“答案”。我想知道我真正拥有多少灵 active 。

这是有效的代码，包括一个新的 AlertSet 组件:

/** @jsx React.DOM */

function AlertNotice(level, message, code) {
    this.level = level;
    this.message = message;
    this.code = code || null;
}

function SuccessAlert(message) {
    AlertNotice.call(this, 'success', message);
}
SuccessAlert.prototype = Object.create(AlertNotice);
SuccessAlert.prototype.constructor = SuccessAlert;

/* ...more kinds of alerts... */

function ErrorAlert(message, code) {
    AlertNotice.call(this, 'danger', message, code);
}
ErrorAlert.prototype = Object.create(AlertNotice);
ErrorAlert.prototype.constructor = ErrorAlert;

var Alert = ReactBootstrap.Alert;

var AlertDismissible = React.createClass({
    getInitialState: function() {
        return {
            isVisible: true
        };
    },

    render: function() {
        if(!this.state.isVisible)
            return null;

        var message = this.props.message;
        if(this.props.code !== null)
            message = message +'(Code '+ this.props.code +')';
        return (
            <Alert bsStyle={this.props.level} onDismiss={this.dismissAlert}>
                <p>{message}</p>
            </Alert>
        );
    },

    dismissAlert: function() {
        this.setState({isVisible: false});
    }
});

var AlertSet = React.createClass({
    render: function() {
        var alerts = this.props.alerts.map(function(alert, i) {
            return (
                <AlertDismissible key={"alert-"+i} level={alert.level}
                        message={alert.message} code={alert.code} />
            );
        });
        // component must be a single node, so wrap in a div
        return (
            <div>{alerts}</div>
        );
    }
});

var SomethingWithAlerts = React.createClass({
    render: function() {
        var alerts = [
            new ErrorAlert("Goof #1", 123),
            new ErrorAlert("Goof #2", 321)
        ];
        return (
            <AlertSet alerts={alerts} />
        );
    }
});

// TestComponent returns a single node, so doesn't need a div
var TestComponent = (
    <SomethingWithAlerts />
);

React.renderComponent(
  TestComponent,
  document.getElementById('content')
);

关于javascript - 在 React-Bootstrap 中动态生成组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25142337/

25 4 0
文章推荐： javascript - node.js:雅虎天气的 jQuery 插件不打印数据
文章推荐： javascript - 使用 ajax 将数据发布到 PHP 文件
文章推荐： javascript - 选择的自定义绑定(bind)无法将对象作为值处理
文章推荐： javascript - 是否可以检测用户是否打开了新标签页？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com