传递数组作为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);

这是渲染React helloworld.这是预期的,因为没有定义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);

它呈现了helloworld !!!

我在一些教程中读到花括号用于传递变量,以便JSX知道它们是外部变量.

但是为什么case-3不使用明确的花括号虽然数组是在调用期间生成的,为什么它适用于case-2,其中字符串是内联的.

什么时候使用花括号？

如果有人可以指出任何有关反应的好书或在线教程,这对我有帮助.

Answer 1

花括号只需要在JSX元素中使用.像这样:

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