Question

I am passing pre-compiled HTML to my React component through props. The original data looks something like this.

let pageData = [
   title  : 'About',
   content: '<p>Hello <strong> World!</p><a href="/contact">Contact</a>'
]

Then in the component using the dangerouslySetInnerHTML method because I'm not sure if there is anything else to use.

import React from 'react';

export default class PostText extends React.Component {
  render() {
    return (
        <div
          dangerouslySetInnerHTML={{__html: this.props.content}}
        />
      </div>
    );
  }
}

But my question is, how can I convert the <a href="/contact">Contact</a> tag to <Link to="/contact">Contact</Link>.

Even if I don't change the mark up, is there a way to to do something like, "when I click an <a> tag, treat is as <Link> tag".

Answer 1

我认为你可以做这样的事情，拦截链接点击你div中的事件并用路由器导航：

public class ParentViewFragment extends Fragment {

// This is inside the parent fragment class which has multiple items populated using Adapter and ViewHolder
// On item click of the UI i want to update the 'DetailedViewFragment'.
MyRecyclerViewAdapter.OnItemClickListener onItemClickListener = new MyRecyclerViewAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(ItemInformation itemInformation) {
                Toast.makeText(getContext(), "Item Clicked --- " + itemInformation.getCurrentDate(), Toast.LENGTH_LONG).show();

                // On click i am creating new fragment and updating it
                DetailedViewFragment detailedView = new DetailedViewFragment();
                FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
                transaction.replace(R.id.month_detailed_view_container, detailedView).commit();

                detailedView.UpdateDetailedDayView(itemInformation);
            }
        };


}

然后：

<div
    dangerouslySetInnerHTML={{__html: this.props.content}}
    onClick={event => this.navigate(event)}
  />
</div>

React / React路由器 - 对待<a> tags like <link/> tags

1 个答案: