在反应js中将数组作为道具传递答案

【问题标题】：passings array as props in reactjs在反应js中将数组作为道具传递
【发布时间】：2015-08-07 17:36:26
【问题描述】：

我是新手。

我一直在尝试 react，但我一直在思考如何使用 props 传递数组。

案例一：

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，其中字符串是内联的。

大括号究竟是什么时候使用的？

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

【问题讨论】：

stackoverflow.com/questions/34802882/…

标签： reactjs

【解决方案1】：

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

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

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

上面的代码等价于：

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

【讨论】：

【解决方案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>
  );
}

【讨论】：