Question

我有一个Keypad组件，每次按下按钮都会将该按钮的值添加到数组中：

var keys = this.props.keys.map(function(k, index){
        return (
            <tr className="button-row" key={index}>
                <td>
                    <button
                        className="keypad-buttons"
                        onClick={self.props.number.bind(null, k.k)}
                        >{k.k}</button>
                </td>
            </tr>
        )
    })

在我的主App组件中，我有一种方法可以添加Keypad输入的数字，以便我可以映射它们并在textArea中显示它们我的Screen组件。以下是App的相关部分：

getInitialState: function(){
  return {numbers: []}
},
addNumber: function(num){
  var number = [
    {
      n: num
    }
 ]
  this.setState({
  numbers: this.state.numbers.concat(number)
})
},

在Screen组件中，我试图映射从App收到的道具，如下所示：

var pinNumbers = this.props.pin.map(function(num, index){
        return (
                <span key={index}>{num.n}</span>

                )
    }).join(' ')

然后通过执行textArea在value={pinNumbers}中显示该内容。因此，如果我在键盘上输入1 2 3，它应该映射到对象数组并在textArea组件的Screen中显示每个值（123）;相反，它显示[对象对象]，我无法弄清楚为什么。这是一个演示：http://codepen.io/p-adams/pen/PzZWJJ

Answer 1

问题在于此代码

var pinNumbers = this.props.pin.map(function(num, index){
        return (
                <span key={index}>{num.n}</span>    
                )
    }).join(' ');

它包含JSX。让desugar JSX看看该片段中究竟发生了什么。

<span key={index}>{num.n}</span>将被转换为

React.createElement(
  "span",
  { key: index },
  num.n
);

巴贝尔。您可以在线Babel REPL验证这一点。

因此，您有一个React Elements数组，您可以将其转换为字符串（接收显而易见的[Object object]）并使用空格连接。

实际上，您添加跨度的尝试没有意义，因为您无法将HTML格式嵌入到textareas中。这件作品适合我

var pinNumbers = this.props.pin.map(function(num, index){
  return num.n; 
}).join(' ');

数组上的映射返回[object Object]

1 个答案: