使用React Router:如何在路径中每次使用不同的props多次渲染组件?

时间:2019-12-19 04:03:34

标签: reactjs react-router

到目前为止,我已经完成了这项工作,但是如何在第一个Line_json下以相同的经济方式在不同的道具(例如senseAction isegatif)下渲染第二个Line_json呢?

           <Router> <Route
                        path="/economie"
                        render={props => (
                            <Line_json
                              {...props}
                              senseAction={"ispositif"}
                            ></Line_json>
                          )
                        }
                      /></Router>

2 个答案:

答案 0 :(得分:2)

渲染功能就像常规渲染一样,因此您可以添加两倍的组件

<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">
    <channel>
    <title>Podcast</title>
    <link>https://www.example.com/</link>
    <language>en-us</language>
    <copyright>Copyright example.com</copyright>
    <itunes:subtitle>Podcast</itunes:subtitle>
    <itunes:author>Name</itunes:author>
    <itunes:summary>Summary</itunes:summary>
    <description>Description</description>
    <itunes:owner>
        <itunes:name>Name</itunes:name>
        <itunes:email>me@example.com</itunes:email>
    </itunes:owner>
    <itunes:explicit>clean</itunes:explicit>
    <itunes:image href="https://example.com/iamge.png"/>
    <itunes:category text="Business"/>
    <itunes:category text="Technology"/>
    <itunes:category text="Music"/>
    <itunes:category text="News"/>
    <item>
         <title>Title</title>
         <itunes:author>Me</itunes:author>
         <itunes:subtitle>Subtitle</itunes:subtitle>
         <itunes:summary>Long description....</itunes:summary>
         <itunes:image href="https://example.com/image2.jpg"/>
         <enclosure url="https://example.com/media.m4a" length="22:24" type="audio/x-m4a"/>
         <link>https://www.example.com/podcast/title</link>
         <pubDate>Fri, 11 Dec 2015 4:43:43 GMT</pubDate>
         <category>Tech News</category>
         <itunes:duration>22:24</itunes:duration>
    </item>
</channel>
</rss>

鉴于您的组件始终需要一个根父级,因此必须添加一个<Router> <Route path="/economie" render={props => ( <React.Fragment> <Line_json {...props} senseAction={"ispositif"} <Line_json {...props} senseAction={"isnegatif "} ></Line_json> </React.Fragment> ) )} /> </Router>

答案 1 :(得分:2)

您可以将其渲染为片段:

if(elems[i].innerHTML == "Initial Inspection/Work"){

或具有唯一键的数组:

render={props => (
  <>
    <Line_json
      {...props}
      senseAction="ispositif"
    />
    <Line_json
      {...props}
      senseAction="dsgdsg"
    />
  </>
))}