Question

我有这段代码

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中，该ID在单击时即可获得。如果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包装其他元素时，id返回为null。像这样

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>
  );
});

在这种情况下，id的值为null，因此我的代码中断了。有没有办法解决这个问题，还是我不应该用NavLinks包装元素？

ReactJs |将子元素放入NavLink是不好的做法吗？

0 个答案: