javascript - 如何在reactjs中使用array.prototype.join

Question

我想用空格连接所有名字

 const { author} = this.props;
        const authors= author.map((e, i) =>
            <div className="ck12 o6 b4" key={i}>
                <div className="authorlist">
                    <h4>{e.name}</h4>

代码如下所示。约翰·汤姆· jack 我想要约翰·汤姆· jack 。我添加了 e.name.join("") 但给出错误的代码 join 不是一个函数。我尝试how to render react components by using map and join但我不能。

Answer 1

先生早上好，

函数join仅适用于Array。在这里了解更多信息:https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join

此函数会将数组中的所有元素(在大多数情况下是字符串)连接到单个字符串。

对于您的具体情况，由于作者姓名位于具有属性名称的对象内，您可以执行以下操作:

const authorNames = author.map(e => e.name).join(' ');
// authorNames will be now John Tom Jack

您将使用map方法将该数组转换为仅包含字符串的新数组。然后您可以使用 join 函数连接这些字符串。

// Example class component
class Thingy extends React.Component {
  render() {
    const names = [{ name: 'John'}, {name: 'Doe'}, {name: 'Snow'}];
    console.log('names', names);
    return (
      <div>
        <div>{names.map(e => e.name).join(' ')}</div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

希望有帮助。