如何使用自定义结果值在 textarea 内呈现 json 数据答案

【问题标题】：How to render json data inside textarea with custom result value如何使用自定义结果值在 textarea 内呈现 json 数据
【发布时间】：2018-09-03 15:27:18
【问题描述】：

我的问题是基于这个link，我想用自定义结果值在 textarea 中呈现 json 数据。

代码：

import React from 'react';
import { render } from 'react-dom';

const data = [
  {
    name: "peter",
    location: "boston"
  },
  {
    name: "john",
    location: "florida"
  }
]

class App extends React.Component {
  render() {
    return (
      <div>
        <textarea value={data.map(e => JSON.stringify(e).replace(/{|}/g, '')).join('\n')} rows='3' cols='30' />
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));

结果：

如果我期望结果只是 json 值并在第一个值和第二个值之间添加一个字符串“at”，如下图所示？

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用template literals 组合map 中每个对象的两个属性，如下所示：

const text = data
  .map(item => `${item.name} at ${item.location}`)
  .join('\n')

这是CodePen 上的一个工作示例

【讨论】：