从字符串元素数组中创建DOM元素，然后将结果连接到render（）

Question

＆＃34; keyCombo＆＃34;对象的定义如下所示，目的是在React组件的cat smb://server1/share1/textfile1 >> textfile2 方法中将数据呈现为样式线：

render

我想得到：

但相反，我得到了

let items = [{"keyCombo": ["⌘","0"]}, {"keyCombo": ["⌘","Ctrl", "1"]}] tokbd = (keyCombo) => { let styledKeys = keyCombo.map(key => <kbd>{key}</kbd>) return <span>{styledKeys.join(" + ")}</span> } render() { return( <div> {items.map(item => <span>{this.tokbd(item.keyCombo)}</span>)} </div> ) } （和）
[object Object] + [object Object]

如何将[object Object] + [object Object] + [object Object]数组中的字符组合成：

＆＃34;（样式元素）+（样式元素）+（样式元素）＆＃34;

而不是：

＆＃34;样式（元素+元素+元素）＆＃34;

即使keyCombo字符也会无意中被设置为风格？

Answer 1

join（）方法将数组（或类数组对象）的所有元素连接成一个字符串并返回该字符串。 MDN这就是您获得[object Object]的原因。

您可以尝试使用reduce而不使用第二个参数：

  tokbd = (keyCombo) => {
      let styledKeys = keyCombo.map(key => <kbd>{key}</kbd>).reduce((prev, curr) => [prev, ' + ', curr])

      return <span>{styledKeys}</span>
    }

<强> codesandbox

Answer 2

您还可以使用Object.entries将对象转换为[key，value]对的数组。然后，这允许您使用所有数组转换方法。

tokbd = (keyCombo) => {
  return Object.entries(keyCombo).map(k => <kbd>{k[0].join(' + ')}</kbd>)[0]
}

Answer 3

在对象数组上使用Array＃join时，将调用每个项目的.toString()方法。对象的.toString()方法返回[object Object]。

注意： tokbd方法实际上应该是一个单独的组件。我已将组件命名为KeyCombo。

选项1 - 插入+：

的CSS伪元素

＆＃13;

＆＃13;

const items = [{"keyCombo": ["⌘","0"]}, {"keyCombo": ["⌘","Ctrl", "1"]}]

const KeyCombo = ({ keyCombo }) => (
  <div>{
    keyCombo.map(key => <kbd key={key}>{key}</kbd>)
  }</div>
)

const App = ({ items }) => (
  <div>{
    items.map((item, index) => <KeyCombo key={index} {...item} />)
  }</div>
);

ReactDOM.render(
  <App items={items} />,
  demo
);

＆＃13;

kbd:not(:first-child)::before {
  content: '+'
}

＆＃13;

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

＆＃13;

＆＃13;

＆＃13;

选项2：为每个键创建一个数组，展平并切片最后一个

＆＃13;

＆＃13;

const items = [{"keyCombo": ["⌘","0"]}, {"keyCombo": ["⌘","Ctrl", "1"]}]

const KeyCombo = ({ keyCombo }) => (
  <div>{
    [].concat(...keyCombo.map(key => [
      <kbd key={key}>{key}</kbd>,
      <span key={`${key}+`}>+</span>
    ])).slice(0, -1)
  }</div>
)

const App = ({ items }) => (
  <div>{
    items.map((item, index) => <KeyCombo key={index} {...item} />)
  }</div>
);

ReactDOM.render(
  <App items={items} />,
  demo
);

＆＃13;

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

＆＃13;

＆＃13;

＆＃13;