2

我有一个输入，在用户插入文本后，我想在button-group. 我拆分句子并映射它返回

<input .....><button onClick=....>

所以我在输入中插入文本，单击按钮后text.split(" ") 一切正常，直到这里。但在按钮组部分显示什么

<div className="btn-group" role="group" aria-label="...">
   {this.mapArrayToButtons()}
</div>

   mapArrayToButtons(){
        this.state.textArr.map((word)=>{
            console.log('the word: ',word);
            return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    }

textArr.length我逐字查看控制台日志时间。但没有呈现任何按钮，浏览器中也没有显示任何内容。

4

3 回答 3

4

您需要从函数中返回一个值，如下所示：

   mapArrayToButtons(){
        return this.state.textArr.map((word)=>{
            return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    }

希望有帮助！

于 2016-12-05T19:41:29.080 回答
3

您需要知道/注意两件事：

1 - 如果你有一个 jsx 数组，例如：

let arrayOfJsx = [ <div>Hello</div>, <div>World</div> ]

当您将此数组放入您的渲染方法时，例如：

render(){

   let arrayOfJsx = [ <div>Hello</div>, <div>World</div> ] 

   return (
      <div> { arrayOfJsx } </div>
   )
}

相当于

render(){

       return (
          <div>
               <div>Hello</div>
               <div>World</div> 
          </div>
       )
}

2 - Array.prototype.forEach 和 Array.prototype.map 之间的区别：

当你使用 forEach 时，你从传递给 forEach 的函数返回什么并不重要，重要的是知道当你返回一个值时函数停止执行，这对 forEach 来说并不特殊。但是当我们说返回的内容不重要时，我们想指出返回的内容对 Array.prototype.map 的重要性：

当您想根据为数组中的每个项目返回的内容创建数组时，您想使用 map。

例子 ：

let a = [ 1,2,3 ]
let b = a.map( item => item + 1 )
// b is now [ 2,3,4 ]

总而言之，您要在示例中执行的操作是从 map 创建一个数组并将其放入您的渲染方法中。如果你不知道这两点，你就不会理解它是如何工作的。

注意：您需要为您在 map 函数中返回的每个项目传递一个唯一键。例如 ：

let a = [ 1,2,3 ]
let arrayOfJsx = a.map( item => <div key={item} > I am { item } </div> )

所以反应不会抱怨

于 2016-12-05T20:22:29.317 回答
0

尝试这个

mapArrayToButtons(){
    const buttons = this.state.textArr.map((word)=>{
        console.log('the word: ',word);
        return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    return buttons;

}
于 2016-12-05T20:11:31.440 回答