Question

{breadcrumbs.map((obj,i) => 
    <p> {i} > 1 ? "<span className="seperator">|</span>" : <span className="bold">{obj}</span> </p>
)}

我想从数组中制作面包屑但是使用上面的代码失败了。 breadcrumbs只是一个数组[＆＃39; books＆＃39;，＆＃39; javascript＆＃39;]，我的预期输出将是

图书 - ＆gt; javascript等等，如果我在数组中有超过2项，它应该工作。

Answer 1

此代码的一个问题是语法。花括号放置不当，元素不应该是弦，即。跨度。

另一个问题是你如何处理分隔符及其类。您需要在除第一个之外的所有元素之前插入分隔符。一种方法是使用reduce在映射之前修改数组。

侧点，在所有映射项上放置一个键。

这就是它的工作原理：

  <p>
    {['books','javascript'].reduce((all, one, i) => {
        i > 0 && all.push('->');
        all.push(one);
        return all;
    }, []).map((obj, i) => 
      <span key={i} className={i%2 ? 'seperator' : 'bold'}>{obj}</span>
    )}
  </p>

https://jsfiddle.net/q0vt53po/1/

Answer 2

您可以调用函数来渲染条件组件，如

＆＃13;

class App extends React.Component {
  conditionalRender(i, len) {
   if (i < len -1) 
   return <span className="seperator">-></span> 
   
  }
  render() {
  
    var breadcrumbs = ['books','javascript', 'something'];
    
    return (
         <div>{breadcrumbs.map((obj,i) => 
              <span><span className="bold"> {obj} </span>{this.conditionalRender(i, breadcrumbs.length)} </span>
          )}</div>
    )
  }
 }
 ReactDOM.render(<App/>, document.getElementById('app'))

＆＃13;

<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>
<div id="app"></div>

＆＃13;

Answer 3

我不确定语法，因为我不是React用户，但基本逻辑很糟糕。如果你做了一个痕迹，你应该在最后一个条目之外的条目之间放置分隔符。基于 HJ Cross 的回答，这是您正在寻找的正确代码：

var arry = ['books','javascript', 'reactJS'];
ReactDOM.render(
  <div>
    {arry.map((obj,i) => 
      <p key={i}><span className="bold">{obj}</span>{
        i < arry.length - 1 
          ?  <span className="seperator">-&gt;</span>
          : <span className="none"></span>
      }</p>
    )}
  </div>,
  document.getElementById('container')
);

Answer 4

像这样写：

var breadcrumb = ['food','hotdogt', 'a', 'b', 'c'];

var App = () => {
   return(
       <div>
          {
             breadcrumb.map((obj,i) => {
                return <span key={obj}>
                           <span className="bold"> {obj} </span>
                           {i != breadcrumb.length -1 ? <span className="seperator"> -> </span> : null} 
                       </span>
             })
          }
       </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

.bold {
  font-weight: bold;
}

.seperator {
  color: blue;
}

<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>

<div id='app'/>

简单的breadcrum徽标在jsx的反应绑定

4 个答案: