javascript - React 文本区域中的换行符

Question

我正在尝试根据现有数组设置文本区域的值，但我希望在文本区域中用新行分隔数组项。我希望 textarea 包含无序列表中的项目，这样我就可以制作一个可以将 textarea 的内容复制到剪贴板的按钮。

我收到此错误:我认为是因为\n 的缘故，需要 Unicode 转义序列\uXXXX。我真的不知道还能做什么。预先感谢您的帮助。

class NamesList extends Component{
	constructor(props){
		super(props);

	}

	render(){
		const RenderedNames = this.props.formattedNames.map((name, index) => {
			return <li key={index} >{name}</li>
		});

		const formattedNamesBreak = this.props.formattedNames.map((name, index) => {
			return name \n
		});

		return(
			<div>
			<ul className='media-list list-group'>
				{RenderedNames}
			</ul>
			<textarea className='hidden' readOnly='true' value={formattedNamesBreak}></textarea>
			</div>
		);
	}
	
};


export default NamesList;

Answer 1

因为你的数组是一个字符串数组(名称)，你不需要 map() 因为这会创建一个结果数组，如果你尝试输出一个数组作为文本区域值，它将被转换为一个字符串，用逗号分隔值。

解决方案是调用Array.prototype.join()在数组上并使用新行作为“胶水”:

var formattedNamesBreak = this.props.formattedNames.join('\n');