Comment modifier une partie de la chaîne de l'état de réaction

Question

1. J'ai un état appelé train. Je reçois le fichier JSON d'une API et utilise this.setState({train: json}) pour définir le fichier JSON sur state.train.

2. Dans le train de l'Etat, il y a route_name et advisory_message:

   { 
   "route_name": "Warminster", 
   "advisory_message": "<div class=\"fares_container\">\n\t\t\t\t <p>Customers should review the service information below as trains operating to Center City and continuing to Airport Terminals will depart <strong>EARLIER <\/strong>than regularly scheduled at <strong>Warminster, Hatboro, Crestmont, Roslyn, Ardsley, Glenside, and Jenkintown-Wyncote stations<\/strong>.<\/p>\n<p><span style=\"font-size: small;\"><strong>Inbound (toward Center City) Service:<\/strong><\/span><\/p>\n<p>Download the <a title=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" href=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" target=\"_blank\">PDF Sunday, October 29th Warminster timetable<\/a> or click on the image below to enlarge.<\/p>\n<p><a title=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" href=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" target=\"_blank\"><img src=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" alt=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" width=\"725\" height=\"224\" \/><\/a><\/p>\n<ul>\n<\/ul>\n<p>AM Trains <strong>#403, #405, and #407<\/strong> will depart Glenside Station at the regularly scheduled times<\/p>\n<ul>\n<\/ul>\n<<\/div>" 
   } 
   

Comment pourrais-je changer une partie de la valeur advisory_message? Par exemple, changer le href?

Merci beaucoup.

Answer 1

Vous pouvez utiliser JQuery pour analyser très facilement le code HTML dans json, puis définir l'état après avoir modifié le paramètre href. Voici un exemple.

var myJSON = { 
 
"route_name": "Warminster", 
 
"advisory_message": "<div class=\"fares_container\">\n\t\t\t\t <p>Customers should review the service information below as trains operating to Center City and continuing to Airport Terminals will depart <strong>EARLIER <\/strong>than regularly scheduled at <strong>Warminster, Hatboro, Crestmont, Roslyn, Ardsley, Glenside, and Jenkintown-Wyncote stations<\/strong>.<\/p>\n<p><span style=\"font-size: small;\"><strong>Inbound (toward Center City) Service:<\/strong><\/span><\/p>\n<p>Download the <a title=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" href=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" target=\"_blank\">PDF Sunday, October 29th Warminster timetable<\/a> or click on the image below to enlarge.<\/p>\n<p><a title=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" href=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" target=\"_blank\"><img src=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" alt=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" width=\"725\" height=\"224\" \/><\/a><\/p>\n<ul>\n<\/ul>\n<p>AM Trains <strong>#403, #405, and #407<\/strong> will depart Glenside Station at the regularly scheduled times<\/p>\n<ul>\n<\/ul>\n<<\/div>" 
 
}; 
 
var msg = myJSON.advisory_message; 
 
var $advisoryHTML = $(msg,{html:msg}); 
 
var anchors = $("a", $advisoryHTML); 
 
//change href of first anchor 
 
console.log("old href is: " + $(anchors[0]).attr("href")); 
 
$(anchors[0]).attr("href", "/my/new/href"); 
 
console.log("NEW href is: " + $(anchors[0]).attr("href")); 
 
// put the modified html back into the json object 
 
myJSON.advisory_message= $advisoryHTML.html(); 
 
//this.setState({train: myJSON})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>