ReactJs | Это плохая практика, чтобы поместить дочерние элементы в NavLink? - PullRequest
Новая
       13

ReactJs | Это плохая практика, чтобы поместить дочерние элементы в NavLink?

0 голосов
/ 10 сентября 2018

У меня есть этот блок кода 

handleClick = (e) => {
  let ref1 = "storytitle" + e.target.id;
  let ref2 = "storybody" + e.target.id;
  let ref3 = "storylocation" + e.target.id;
  let ref4 = "storyimage" + e.target.id;

  console.log(ref1);
  console.log(e.target.getAttribute('id'));
  this.props.story.storytitle = this.refs[ref1].textContent;
  this.props.story.storybody = this.refs[ref2].textContent;
  this.props.story.location = this.refs[ref3].textContent;
  this.props.story.storyimage = this.refs[ref4].src;
}

Это функция, которая срабатывает при нажатии. Цель состоит в том, чтобы взять местоположение тела заголовка и образ статьи и отобразить его в дочернем компоненте.

Чтобы сделать это, я дал элементы, которые содержат информацию, в которой я нуждаюсь. Тем не менее, я завернул все в NavLink, идентификатор которого получен при нажатии. Когда у Navlink нет дочерних элементов, подобных этому; 

<div className="otherNews">
  <div className="otherNewsImg">
    <img alt="pix" ref="storyimage4" src={ImageURL[storiesArr.length - 4]} />
  </div>

  <div className="otherNewsText">
    <h3 className="other-title" ref="storytitle4">{Title[storiesArr.length - 4]}</h3>
    <span className="hiddenLocation" ref="storylocation4">{location[storiesArr.length - 4]}</span>
    <p className="other_text" ref="storybody4">
      {Content[storiesArr.length - 4]}
    </p>

    <p className="linktofull">
      <NavLink to="/story" id="4" onClick={this.handleClick}>
        Read Full Story <span> > </span>
      </NavLink>
    </p>
  </div>
</div>

Это работает. Однако, когда я обертываю другие элементы с помощью NavLink, идентификатор возвращается как ноль. Вот так 

const getContent = storiesArr.map((eachStory, i) => {
  let index = i + 4
  return(
    <NavLink to="/story" key={i} id={index} className="navLink" onClick={this.handleClick}>
      <div className="news-item">
        <p className="origin">Canada-{location[i]}</p>
        <p className="item-title" ref={`storytitle${index}`}>
          {Title[i]}
        </p>
      </div>
    </NavLink>
  );
});

значение идентификатора равно нулю в этом случае, и поэтому мой код ломается. Есть ли способ решить эту проблему, или я не должен обернуть элементы с помощью NavLinks, как это?

...