将数组作为props传递给reactjs

  • Z时代
  • 2024-01-10
  • 分类：问答

我是新来的。

我一直在试验react，但对如何使用props传递数组感到困惑。

情况1：

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});
React.render(<Navigation config={c}/>, document.body);

这正在渲染helloworld程序。这是预期的。

后来我尝试了。

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
              {this.props.config} helloworld ;
            </div>
            );
    }
});
React.render(<Navigation config="React"/>, document.body);

这正在渲染React helloworld。由于未定义propType，因此可以预期。

接下来我尝试了。

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});
React.render(<Navigation config=['!!!'] />, document.body);

这没有渲染任何东西。

后来，当我已经改变了React.render(<Navigation config=['!!!'] />,

document.body);对React.render(<Navigation config={['!!!']} />,

document.body);

它呈现了helloworld！

我已经读过一些教程，大括号用于传递变量，以便JSX知道它们是外部变量。

但是，尽管在调用过程中创建了数组，但case-3为何不使用显式花括号也不起作用，为什么它对于在内联字符串的case-2中起作用呢？

究竟何时使用花括号？

如果有人能指出我关于反应的任何好书或在线教程，这对我会有所帮助。

回答：

花括号 需要在JSX元素中使用。像这样：

<MyComponent somProp={['something']} />

在上面的例子中，{}是这样说的：“评估我传递的表达式并将其作为道具传递”。{}您可以在其中传递

有效的JavaScript对象或表达式。请注意，如果你传递一个字符串，并专门为字符串，你不需要花括号…像<MyComponent

somProp="something" />。

上面的代码与此等效：

var myArray = ['something'];
<MyComponent somProp={myArray} />

以上是 将数组作为props传递给reactjs 的全部内容， 来源链接： utcz.com/qa/431059.html

回到顶部