如何在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>

代码看起来像这样。 JohnTomJack我想要John Tom Jack。 我添加了e.name.join（“”），但是给出错误连接的代码不是一个函数。 我尝试如何使用map和join来渲染React组件，但是我做不到。

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> 

希望能有所帮助。