在reactjs中作为道具的传递数组

Question

我是新来的反应。

我一直在试验如何使用道具来传递数组。

案例-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程序。这是意料之中的。

后来我试过了。

案例-2：

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);

这是渲染。这是预期的，因为没有定义propType。

接下来我试过了。

案例-3 :

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);时

它渲染了地狱世界！

我在一些教程中读到，大括号是用来传递变量的，这样JSX就会知道它们是外部变量。

但是为什么case-3没有显式的大括号，尽管数组是在调用期间生成的，以及为什么它在字符串是内联的情况下工作。

花括号到底是什么时候用的？

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

Answer 1

元素中只需要使用花括号。如下所示：

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

在上面的例子中，{}是这样说的：“评估我在其中传递的表达式，并将它作为一个支柱传递”。在{}中，您可以传递任何、有效的JavaScript对象或表达式。请注意，如果您传递一个字符串，特别是字符串，您不需要花括号.就像<MyComponent somProp="something" />。

上述代码相当于以下内容：

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

Answer 2

实际上，您根本不需要指定PropTypes来使用道具。这只是在开发过程中记录和验证道具类型的一种好方法。

您正在正确地使用{}。{}将返回内部表达式的值。

然而，， {['everyone']}并没有多大意义。在这里，您要求React返回数组本身的值，而不是数组中的一个元素/值。

要从数组中获取第一个值，您应该执行：{this.props.config[0]}，因为"everyone“值位于数组的0索引处。

如果您的数组有多个值，则可以执行以下操作：

render: function() {
  var values = this.props.config.map(function(value, i){
    return (
      <p>value</p>
    );
  });

  return (
    <div className="navigation">
      helloworld {values};
    </div>
  );
}

如果您真正想要打印数组本身，而不是其中的一个特定值，那么您有两个很好的选择：

render: function() {
  return (
    <div className="navigation">
      helloworld {this.props.config.toString()};
    </div>
  );
}

或

render: function() {
  return (
    <div className="navigation">
      helloworld {JSON.stringify(this.props.config)};
    </div>
  );
}