javascript - 如何垂直渲染数组

Question

我正在尝试垂直渲染一个数组

目前是这样显示的

但我需要这样

Travel

Heart

Earth

Blackjack

等等……

这是代码

let textareaStyle = {
  width: '100%'
}, people = [
    'Hello',
    'Travel',
    'Heart',
    'Earth',
    'Hills',
    'Blackjack',
    'Casino',
    'Alberto',
    'Marcelo',
    'Jorge'
  ], displayResult;

class Login extends Component {

  constructor() {
    super();
    this.state = {value : '', result: ''};
  } 

  render () {
    return (
         <input type="text" onChange={this._onChange.bind(this)} style={textareaStyle}
                     onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
         <p>{this.state.result}</p>
    );
  }

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return people.filter(function(person) {
      if (person.match(reg)) {
        return person;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);
    this.setState({result: autoCompleteResult.join(', ')});
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }  

}


export default Login;

所以我在这里展示结果

<p>{this.state.result}</p>

有些地方我需要垂直显示它，比如下拉菜单

Answer 1

函数matchPeople返回一个数组。

然后，将该数组设置为 innerHTML的 #result .

然而，innerHTML需要一个字符串，所以它使用 toString方法将数组转换为字符串。该方法使用逗号分隔符连接数组中的项目。

相反，您可以尝试使用 <br /> 加入数组元素作为分隔符，这将在结果之间产生换行符。

result.innerHTML = autoCompleteResult.join('<br />');

或者，由于您只处理文本，我建议避免使用 innerHTML并使用 textContent相反，使用换行符作为分隔符。

result.textContent = autoCompleteResult.join('\n');

注意换行符默认折叠到一个普通空格中。为了防止它，使用 white-space :

#result { white-space: pre-line; }