React.js组合静态元素

时间:2016-06-02 13:22:21

标签: reactjs

我想动态组合不同的反应元素:

{{1}}

而不是打印元素,这是打印:

{{1}}

2 个答案:

答案 0 :(得分:2)

这是你想要做的:

    [INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building java-blog-aggregator-boot 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ jba ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 1 resource
[INFO] Copying 76 resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ jba ---
[INFO] Nothing to compile - all classes are up to date
[INFO] 
[INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ jba ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 9 resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.1:testCompile (default-testCompile) @ jba ---
[INFO] Nothing to compile - all classes are up to date
[INFO] 
[INFO] --- maven-surefire-plugin:2.18.1:test (default-test) @ jba ---
[INFO] Surefire report directory: C:\Users\Username\Desktop\java-blog-aggregator-boot-master\target\surefire-reports

-------------------------------------------------------
 T E S T S
-------------------------------------------------------
Running cz.jiripinkas.jba.service.AllTests
16:18:13,179 |-INFO in ch.qos.logback.classic.LoggerContext[default] - Could NOT find resource [logback.groovy]
16:18:13,179 |-INFO in ch.qos.logback.classic.LoggerContext[default] - Could NOT find resource [logback-test.xml]
16:18:13,179 |-INFO in ch.qos.logback.classic.LoggerContext[default] - Found resource [logback.xml] at [file:/C:/Users/Username/Desktop/java-blog-aggregator-boot-master/target/classes/logback.xml]
16:18:13,331 |-INFO in ch.qos.logback.classic.joran.action.ConfigurationAction - debug attribute not set
16:18:13,353 |-INFO in ch.qos.logback.core.joran.action.AppenderAction - About to instantiate appender of type [ch.qos.logback.core.ConsoleAppender]
16:18:13,397 |-INFO in ch.qos.logback.core.joran.action.AppenderAction - Naming appender as [STDOUT]
16:18:13,602 |-WARN in ch.qos.logback.core.ConsoleAppender[STDOUT] - This appender no longer admits a layout as a sub-component, set an encoder instead.
16:18:13,602 |-WARN in ch.qos.logback.core.ConsoleAppender[STDOUT] - To ensure compatibility, wrapping your layout in LayoutWrappingEncoder.
16:18:13,602 |-WARN in ch.qos.logback.core.ConsoleAppender[STDOUT] - See also http://logback.qos.ch/codes.html#layoutInsteadOfEncoder for details
16:18:13,603 |-INFO in ch.qos.logback.core.joran.action.AppenderAction - About to instantiate appender of type [ch.qos.logback.core.rolling.RollingFileAppender]
16:18:13,607 |-INFO in ch.qos.logback.core.joran.action.AppenderAction - Naming appender as [FILE]
16:18:13,660 |-INFO in c.q.l.core.rolling.TimeBasedRollingPolicy - No compression will be used
16:18:13,663 |-INFO in c.q.l.core.rolling.TimeBasedRollingPolicy - Will use the pattern debug.%d{yyyy-MM-dd}.%i.log for the active file
16:18:13,670 |-INFO in ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP@4d3167f4 - The date pattern is 'yyyy-MM-dd' from file name pattern 'debug.%d{yyyy-MM-dd}.%i.log'.
16:18:13,670 |-INFO in ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP@4d3167f4 - Roll-over at midnight.
16:18:13,820 |-INFO in ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP@4d3167f4 - Setting initial period to Thu Jun 02 16:17:02 EEST 2016
16:18:13,825 |-INFO in ch.qos.logback.core.rolling.RollingFileAppender[FILE] - Active log file name: debug.log
16:18:13,825 |-INFO in ch.qos.logback.core.rolling.RollingFileAppender[FILE] - File property is set to [debug.log]
16:18:13,827 |-INFO in ch.qos.logback.classic.joran.action.RootLoggerAction - Setting level of ROOT logger to INFO
16:18:13,827 |-INFO in ch.qos.logback.core.joran.action.AppenderRefAction - Attaching appender named [FILE] to Logger[ROOT]
16:18:13,828 |-INFO in ch.qos.logback.core.joran.action.AppenderRefAction - Attaching appender named [STDOUT] to Logger[ROOT]
16:18:13,828 |-INFO in ch.qos.logback.classic.joran.action.ConfigurationAction - End of configuration.
16:18:13,829 |-INFO in ch.qos.logback.classic.joran.JoranConfigurator@ed9d034 - Registering current configuration as safe fallback point

Tests run: 21, Failures: 5, Errors: 0, Skipped: 0, Time elapsed: 4.003 sec <<< FAILURE! - in cz.jiripinkas.jba.service.AllTests
testGetItemsFileJavaVids(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.189 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<23 03 2014 [09]:01:34> but was:<23 03 2014 [10]:01:34>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileJavaVids(RssServiceTest.java:59)

testGetItemsFileHibernate(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.392 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<04 04 2014 1[7]:20:32> but was:<04 04 2014 1[8]:20:32>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileHibernate(RssServiceTest.java:84)

testGetItemsFileSpring(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.475 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<07 04 2014 1[0]:14:00> but was:<07 04 2014 1[1]:14:00>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileSpring(RssServiceTest.java:70)

testGetRssDate(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.002 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<Sun Mar 23 [09:01:34 C]ET 2014> but was:<Sun Mar 23 [10:01:34 E]ET 2014>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetRssDate(RssServiceTest.java:120)

testGetItemsFileInstanceofJavaPublishedDate(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 1.005 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<22 02 2015 1[3]:35:00> but was:<22 02 2015 1[4]:35:00>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileInstanceofJavaPublishedDate(RssServiceTest.java:184)

Running cz.jiripinkas.jba.service.BlogServiceTest
Tests run: 2, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.001 sec - in cz.jiripinkas.jba.service.BlogServiceTest
Running cz.jiripinkas.jba.service.ItemServiceTest
Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0 sec - in cz.jiripinkas.jba.service.ItemServiceTest
Running cz.jiripinkas.jba.service.RssServiceTest
Tests run: 18, Failures: 5, Errors: 0, Skipped: 0, Time elapsed: 0.979 sec <<< FAILURE! - in cz.jiripinkas.jba.service.RssServiceTest
testGetItemsFileJavaVids(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.001 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<23 03 2014 [09]:01:34> but was:<23 03 2014 [10]:01:34>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileJavaVids(RssServiceTest.java:59)

testGetItemsFileHibernate(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.108 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<04 04 2014 1[7]:20:32> but was:<04 04 2014 1[8]:20:32>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileHibernate(RssServiceTest.java:84)

testGetItemsFileSpring(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.249 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<07 04 2014 1[0]:14:00> but was:<07 04 2014 1[1]:14:00>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileSpring(RssServiceTest.java:70)

testGetRssDate(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.001 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<Sun Mar 23 [09:01:34 C]ET 2014> but was:<Sun Mar 23 [10:01:34 E]ET 2014>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetRssDate(RssServiceTest.java:120)

testGetItemsFileInstanceofJavaPublishedDate(cz.jiripinkas.jba.service.RssServiceTest)  Time elapsed: 0.443 sec  <<< FAILURE!
org.junit.ComparisonFailure: expected:<22 02 2015 1[3]:35:00> but was:<22 02 2015 1[4]:35:00>
    at org.junit.Assert.assertEquals(Assert.java:115)
    at org.junit.Assert.assertEquals(Assert.java:144)
    at cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileInstanceofJavaPublishedDate(RssServiceTest.java:184)

Running cz.jiripinkas.jba.service.scheduled.ScheduledTasksServiceTest
Tests run: 4, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.141 sec - in cz.jiripinkas.jba.service.scheduled.ScheduledTasksServiceTest

Results :

Failed tests: 
cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileHibernate(cz.jiripinkas.jba.service.RssServiceTest)
  Run 1: RssServiceTest.testGetItemsFileHibernate:84 expected:<04 04 2014 1[7]:20:32> but was:<04 04 2014 1[8]:20:32>
  Run 2: RssServiceTest.testGetItemsFileHibernate:84 expected:<04 04 2014 1[7]:20:32> but was:<04 04 2014 1[8]:20:32>

cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileInstanceofJavaPublishedDate(cz.jiripinkas.jba.service.RssServiceTest)
  Run 1: RssServiceTest.testGetItemsFileInstanceofJavaPublishedDate:184 expected:<22 02 2015 1[3]:35:00> but was:<22 02 2015 1[4]:35:00>
  Run 2: RssServiceTest.testGetItemsFileInstanceofJavaPublishedDate:184 expected:<22 02 2015 1[3]:35:00> but was:<22 02 2015 1[4]:35:00>

cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileJavaVids(cz.jiripinkas.jba.service.RssServiceTest)
  Run 1: RssServiceTest.testGetItemsFileJavaVids:59 expected:<23 03 2014 [09]:01:34> but was:<23 03 2014 [10]:01:34>
  Run 2: RssServiceTest.testGetItemsFileJavaVids:59 expected:<23 03 2014 [09]:01:34> but was:<23 03 2014 [10]:01:34>

cz.jiripinkas.jba.service.RssServiceTest.testGetItemsFileSpring(cz.jiripinkas.jba.service.RssServiceTest)
  Run 1: RssServiceTest.testGetItemsFileSpring:70 expected:<07 04 2014 1[0]:14:00> but was:<07 04 2014 1[1]:14:00>
  Run 2: RssServiceTest.testGetItemsFileSpring:70 expected:<07 04 2014 1[0]:14:00> but was:<07 04 2014 1[1]:14:00>

cz.jiripinkas.jba.service.RssServiceTest.testGetRssDate(cz.jiripinkas.jba.service.RssServiceTest)
  Run 1: RssServiceTest.testGetRssDate:120 expected:<Sun Mar 23 [09:01:34 C]ET 2014> but was:<Sun Mar 23 [10:01:34 E]ET 2014>
  Run 2: RssServiceTest.testGetRssDate:120 expected:<Sun Mar 23 [09:01:34 C]ET 2014> but was:<Sun Mar 23 [10:01:34 E]ET 2014>


Tests run: 41, Failures: 5, Errors: 0, Skipped: 0

[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 11.344 s
[INFO] Finished at: 2016-06-02T16:18:18+03:00
[INFO] Final Memory: 21M/268M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.18.1:test (default-test) on project jba: There are test failures.
[ERROR] 
[ERROR] Please refer to C:\Users\Username\Desktop\java-blog-aggregator-boot-master\target\surefire-reports for the individual test results.
[ERROR] -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

或者您可以事先将它们变成数组:

return (
  <div>
    { addressElement1() }
    { addressElement2() }
  </div>
);

答案 1 :(得分:1)

嗯,你的实施有一些小错误。如果要渲染变量,则需要使用{address}。并且可以使用简单的[,]

组合React组件

您的最终代码将是这样的

let address = [<addressElement1/>, <addressElement2/>]
return (  
    <div>
        {address}
    </div>
);

修改

let address = [<AddressElement1 key="left"/>, <AddressElement2 key="right"/>]

但是您必须重命名无状态组件宽度A而不是

如果您不想使用密钥,可以直接

return (
    <div>
      <AddressElement1/>
      <AddressElement2/>
    </div>
);