diff --git a/404.html b/404.html index ae6cef5e13..38f8af4485 100644 --- a/404.html +++ b/404.html @@ -80,7 +80,7 @@ Acknowledgements
diff --git a/acknowledgements.html b/acknowledgements.html index f3b97e56e9..d0f85e83db 100644 --- a/acknowledgements.html +++ b/acknowledgements.html @@ -582,7 +582,7 @@ Acknowledgements diff --git a/blog/2013/06/02/jsfiddle-integration.html b/blog/2013/06/02/jsfiddle-integration.html index d95eb20a23..086696ef2b 100644 --- a/blog/2013/06/02/jsfiddle-integration.html +++ b/blog/2013/06/02/jsfiddle-integration.html @@ -114,7 +114,7 @@ Acknowledgements diff --git a/blog/2013/06/05/why-react.html b/blog/2013/06/05/why-react.html index e4c3037ba8..791f6eefae 100644 --- a/blog/2013/06/05/why-react.html +++ b/blog/2013/06/05/why-react.html @@ -190,7 +190,7 @@ but if you are interested in the nuts and bolts Acknowledgements diff --git a/blog/2013/06/12/community-roundup.html b/blog/2013/06/12/community-roundup.html index 9e4015b247..9bbea1830d 100644 --- a/blog/2013/06/12/community-roundup.html +++ b/blog/2013/06/12/community-roundup.html @@ -151,7 +151,7 @@ Acknowledgements diff --git a/blog/2013/06/19/community-roundup-2.html b/blog/2013/06/19/community-roundup-2.html index 0413ed4417..db95fbf75f 100644 --- a/blog/2013/06/19/community-roundup-2.html +++ b/blog/2013/06/19/community-roundup-2.html @@ -174,7 +174,7 @@ Acknowledgements diff --git a/blog/2013/06/21/react-v0-3-3.html b/blog/2013/06/21/react-v0-3-3.html index e484e5aabc..d06c237b6e 100644 --- a/blog/2013/06/21/react-v0-3-3.html +++ b/blog/2013/06/21/react-v0-3-3.html @@ -124,7 +124,7 @@ Acknowledgements diff --git a/blog/2013/06/27/community-roundup-3.html b/blog/2013/06/27/community-roundup-3.html index 2b77b1302e..4b72091005 100644 --- a/blog/2013/06/27/community-roundup-3.html +++ b/blog/2013/06/27/community-roundup-3.html @@ -183,7 +183,7 @@ Acknowledgements diff --git a/blog/2013/07/02/react-v0-4-autobind-by-default.html b/blog/2013/07/02/react-v0-4-autobind-by-default.html index 041daeb6ff..695d96bc5f 100644 --- a/blog/2013/07/02/react-v0-4-autobind-by-default.html +++ b/blog/2013/07/02/react-v0-4-autobind-by-default.html @@ -140,7 +140,7 @@ Acknowledgements diff --git a/blog/2013/07/03/community-roundup-4.html b/blog/2013/07/03/community-roundup-4.html index 02c8e33c1b..20d2770191 100644 --- a/blog/2013/07/03/community-roundup-4.html +++ b/blog/2013/07/03/community-roundup-4.html @@ -169,7 +169,7 @@ Acknowledgements diff --git a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html index 864abb0a7a..86e34640d0 100644 --- a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html +++ b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html @@ -151,7 +151,7 @@ Acknowledgements diff --git a/blog/2013/07/17/react-v0-4-0.html b/blog/2013/07/17/react-v0-4-0.html index 6cd2251065..e38bcb044d 100644 --- a/blog/2013/07/17/react-v0-4-0.html +++ b/blog/2013/07/17/react-v0-4-0.html @@ -141,7 +141,7 @@ If you were using React without JSX previously, your code should still work.Acknowledgements diff --git a/blog/2013/07/23/community-roundup-5.html b/blog/2013/07/23/community-roundup-5.html index b67d92f3de..3c43e98718 100644 --- a/blog/2013/07/23/community-roundup-5.html +++ b/blog/2013/07/23/community-roundup-5.html @@ -198,7 +198,7 @@ Acknowledgements diff --git a/blog/2013/07/26/react-v0-4-1.html b/blog/2013/07/26/react-v0-4-1.html index af1c258f81..3f08d6cacf 100644 --- a/blog/2013/07/26/react-v0-4-1.html +++ b/blog/2013/07/26/react-v0-4-1.html @@ -125,7 +125,7 @@ Acknowledgements diff --git a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html index 472eff6071..009e5c728b 100644 --- a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html +++ b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html @@ -136,7 +136,7 @@ Acknowledgements diff --git a/blog/2013/08/05/community-roundup-6.html b/blog/2013/08/05/community-roundup-6.html index 63c359f2e2..ba6f2a2c16 100644 --- a/blog/2013/08/05/community-roundup-6.html +++ b/blog/2013/08/05/community-roundup-6.html @@ -173,7 +173,7 @@ Acknowledgements diff --git a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html index b2a5efa392..b26e3118c0 100644 --- a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html +++ b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html @@ -142,7 +142,7 @@ Acknowledgements diff --git a/blog/2013/08/26/community-roundup-7.html b/blog/2013/08/26/community-roundup-7.html index 6a5f3ce7c5..6eb2e2a1fb 100644 --- a/blog/2013/08/26/community-roundup-7.html +++ b/blog/2013/08/26/community-roundup-7.html @@ -182,7 +182,7 @@ Acknowledgements diff --git a/blog/2013/09/24/community-roundup-8.html b/blog/2013/09/24/community-roundup-8.html index 9db932af08..85c044607e 100644 --- a/blog/2013/09/24/community-roundup-8.html +++ b/blog/2013/09/24/community-roundup-8.html @@ -162,7 +162,7 @@ Acknowledgements diff --git a/blog/2013/10/03/community-roundup-9.html b/blog/2013/10/03/community-roundup-9.html index 62e8624db5..a7f4e03d9d 100644 --- a/blog/2013/10/03/community-roundup-9.html +++ b/blog/2013/10/03/community-roundup-9.html @@ -186,7 +186,7 @@ Acknowledgements diff --git a/blog/2013/10/16/react-v0.5.0.html b/blog/2013/10/16/react-v0.5.0.html index 5904a3e4c7..2e2812b7e9 100644 --- a/blog/2013/10/16/react-v0.5.0.html +++ b/blog/2013/10/16/react-v0.5.0.html @@ -150,7 +150,7 @@ Acknowledgements diff --git a/blog/2013/10/29/react-v0-5-1.html b/blog/2013/10/29/react-v0-5-1.html index adb6fdaab4..dc996f2660 100644 --- a/blog/2013/10/29/react-v0-5-1.html +++ b/blog/2013/10/29/react-v0-5-1.html @@ -121,7 +121,7 @@ Acknowledgements diff --git a/blog/2013/11/05/thinking-in-react.html b/blog/2013/11/05/thinking-in-react.html index a31e614405..4e2a78feaa 100644 --- a/blog/2013/11/05/thinking-in-react.html +++ b/blog/2013/11/05/thinking-in-react.html @@ -247,7 +247,7 @@ Acknowledgements diff --git a/blog/2013/11/06/community-roundup-10.html b/blog/2013/11/06/community-roundup-10.html index b785772a68..f1afdf6ec9 100644 --- a/blog/2013/11/06/community-roundup-10.html +++ b/blog/2013/11/06/community-roundup-10.html @@ -217,7 +217,7 @@ Acknowledgements diff --git a/blog/2013/11/18/community-roundup-11.html b/blog/2013/11/18/community-roundup-11.html index 397f24254e..a76262892f 100644 --- a/blog/2013/11/18/community-roundup-11.html +++ b/blog/2013/11/18/community-roundup-11.html @@ -178,7 +178,7 @@ Is this some sort of template language? Specifically no. This might have been th Acknowledgements diff --git a/blog/2013/12/18/react-v0.5.2-v0.4.2.html b/blog/2013/12/18/react-v0.5.2-v0.4.2.html index e83e9ca5de..14842f1771 100644 --- a/blog/2013/12/18/react-v0.5.2-v0.4.2.html +++ b/blog/2013/12/18/react-v0.5.2-v0.4.2.html @@ -120,7 +120,7 @@ Acknowledgements diff --git a/blog/2013/12/19/react-v0.8.0.html b/blog/2013/12/19/react-v0.8.0.html index 1826c8a23a..0050969330 100644 --- a/blog/2013/12/19/react-v0.8.0.html +++ b/blog/2013/12/19/react-v0.8.0.html @@ -150,7 +150,7 @@ Acknowledgements diff --git a/blog/2013/12/23/community-roundup-12.html b/blog/2013/12/23/community-roundup-12.html index cf00a5ec6a..edaa54c730 100644 --- a/blog/2013/12/23/community-roundup-12.html +++ b/blog/2013/12/23/community-roundup-12.html @@ -182,7 +182,7 @@ componentDidUpdate: function() { Acknowledgements diff --git a/blog/2013/12/30/community-roundup-13.html b/blog/2013/12/30/community-roundup-13.html index 452cea5390..5e3d56f0b4 100644 --- a/blog/2013/12/30/community-roundup-13.html +++ b/blog/2013/12/30/community-roundup-13.html @@ -197,7 +197,7 @@ Acknowledgements diff --git a/blog/2014/01/02/react-chrome-developer-tools.html b/blog/2014/01/02/react-chrome-developer-tools.html index 9c1c8ef016..973f07600e 100644 --- a/blog/2014/01/02/react-chrome-developer-tools.html +++ b/blog/2014/01/02/react-chrome-developer-tools.html @@ -121,7 +121,7 @@ Acknowledgements diff --git a/blog/2014/01/06/community-roundup-14.html b/blog/2014/01/06/community-roundup-14.html index c350aeab21..70355e0eb3 100644 --- a/blog/2014/01/06/community-roundup-14.html +++ b/blog/2014/01/06/community-roundup-14.html @@ -174,7 +174,7 @@ rails s Acknowledgements diff --git a/blog/2014/02/05/community-roundup-15.html b/blog/2014/02/05/community-roundup-15.html index e3009ca899..0586fcad00 100644 --- a/blog/2014/02/05/community-roundup-15.html +++ b/blog/2014/02/05/community-roundup-15.html @@ -212,7 +212,7 @@ Acknowledgements diff --git a/blog/2014/02/15/community-roundup-16.html b/blog/2014/02/15/community-roundup-16.html index d03dd24a90..74708bdad5 100644 --- a/blog/2014/02/15/community-roundup-16.html +++ b/blog/2014/02/15/community-roundup-16.html @@ -167,7 +167,7 @@ Acknowledgements diff --git a/blog/2014/02/16/react-v0.9-rc1.html b/blog/2014/02/16/react-v0.9-rc1.html index f96033bcd8..58cdf0a2cd 100644 --- a/blog/2014/02/16/react-v0.9-rc1.html +++ b/blog/2014/02/16/react-v0.9-rc1.html @@ -226,7 +226,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/02/20/react-v0.9.html b/blog/2014/02/20/react-v0.9.html index cf15b3c56f..9d37cbde40 100644 --- a/blog/2014/02/20/react-v0.9.html +++ b/blog/2014/02/20/react-v0.9.html @@ -236,7 +236,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/02/24/community-roundup-17.html b/blog/2014/02/24/community-roundup-17.html index 54ea2281c5..7297812d6f 100644 --- a/blog/2014/02/24/community-roundup-17.html +++ b/blog/2014/02/24/community-roundup-17.html @@ -154,7 +154,7 @@ Acknowledgements diff --git a/blog/2014/03/14/community-roundup-18.html b/blog/2014/03/14/community-roundup-18.html index 1a484384ae..80f7647c1d 100644 --- a/blog/2014/03/14/community-roundup-18.html +++ b/blog/2014/03/14/community-roundup-18.html @@ -183,7 +183,7 @@ Thomas Boyt (@thomasaboyt) wrote < Acknowledgements diff --git a/blog/2014/03/19/react-v0.10-rc1.html b/blog/2014/03/19/react-v0.10-rc1.html index a7eb0c6ebf..70809be930 100644 --- a/blog/2014/03/19/react-v0.10-rc1.html +++ b/blog/2014/03/19/react-v0.10-rc1.html @@ -174,7 +174,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/03/21/react-v0.10.html b/blog/2014/03/21/react-v0.10.html index fe149c73af..88f6f22b2d 100644 --- a/blog/2014/03/21/react-v0.10.html +++ b/blog/2014/03/21/react-v0.10.html @@ -174,7 +174,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/03/28/the-road-to-1.0.html b/blog/2014/03/28/the-road-to-1.0.html index 2aa32cc152..c1f66752f9 100644 --- a/blog/2014/03/28/the-road-to-1.0.html +++ b/blog/2014/03/28/the-road-to-1.0.html @@ -137,7 +137,7 @@ Acknowledgements diff --git a/blog/2014/04/04/reactnet.html b/blog/2014/04/04/reactnet.html index 5ec6491c75..face193804 100644 --- a/blog/2014/04/04/reactnet.html +++ b/blog/2014/04/04/reactnet.html @@ -141,7 +141,7 @@ report bugs on GitHub. Acknowledgements diff --git a/blog/2014/05/06/flux.html b/blog/2014/05/06/flux.html index eb94f66017..07c7f6aef6 100644 --- a/blog/2014/05/06/flux.html +++ b/blog/2014/05/06/flux.html @@ -120,7 +120,7 @@ Acknowledgements diff --git a/blog/2014/05/29/one-year-of-open-source-react.html b/blog/2014/05/29/one-year-of-open-source-react.html index d2f7f61275..0e7b471be8 100644 --- a/blog/2014/05/29/one-year-of-open-source-react.html +++ b/blog/2014/05/29/one-year-of-open-source-react.html @@ -118,7 +118,7 @@ Acknowledgements diff --git a/blog/2014/06/27/community-roundup-19.html b/blog/2014/06/27/community-roundup-19.html index 4e16ccba93..9ef2c60aac 100644 --- a/blog/2014/06/27/community-roundup-19.html +++ b/blog/2014/06/27/community-roundup-19.html @@ -151,7 +151,7 @@ Acknowledgements diff --git a/blog/2014/07/13/react-v0.11-rc1.html b/blog/2014/07/13/react-v0.11-rc1.html index 98135da99e..42ec60ff97 100644 --- a/blog/2014/07/13/react-v0.11-rc1.html +++ b/blog/2014/07/13/react-v0.11-rc1.html @@ -235,7 +235,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/07/17/react-v0.11.html b/blog/2014/07/17/react-v0.11.html index 16499d34b6..5310950573 100644 --- a/blog/2014/07/17/react-v0.11.html +++ b/blog/2014/07/17/react-v0.11.html @@ -250,7 +250,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/07/25/react-v0.11.1.html b/blog/2014/07/25/react-v0.11.1.html index f901fed415..90db2cb23b 100644 --- a/blog/2014/07/25/react-v0.11.1.html +++ b/blog/2014/07/25/react-v0.11.1.html @@ -147,7 +147,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/07/28/community-roundup-20.html b/blog/2014/07/28/community-roundup-20.html index b7066712ca..d0dfb82554 100644 --- a/blog/2014/07/28/community-roundup-20.html +++ b/blog/2014/07/28/community-roundup-20.html @@ -187,7 +187,7 @@ Acknowledgements diff --git a/blog/2014/07/30/flux-actions-and-the-dispatcher.html b/blog/2014/07/30/flux-actions-and-the-dispatcher.html index 8e3e6f8ba9..4a54bae6a1 100644 --- a/blog/2014/07/30/flux-actions-and-the-dispatcher.html +++ b/blog/2014/07/30/flux-actions-and-the-dispatcher.html @@ -134,7 +134,7 @@ Acknowledgements diff --git a/blog/2014/08/03/community-roundup-21.html b/blog/2014/08/03/community-roundup-21.html index b7fcf03d39..cb87f7793e 100644 --- a/blog/2014/08/03/community-roundup-21.html +++ b/blog/2014/08/03/community-roundup-21.html @@ -185,7 +185,7 @@ This is not the intended way to use React but can be useful as last resort if yo Acknowledgements diff --git a/blog/2014/09/03/introducing-the-jsx-specification.html b/blog/2014/09/03/introducing-the-jsx-specification.html index c0cd055d17..19bf815026 100644 --- a/blog/2014/09/03/introducing-the-jsx-specification.html +++ b/blog/2014/09/03/introducing-the-jsx-specification.html @@ -118,7 +118,7 @@ Acknowledgements diff --git a/blog/2014/09/12/community-round-up-22.html b/blog/2014/09/12/community-round-up-22.html index 5d47300369..ed35cdaef7 100644 --- a/blog/2014/09/12/community-round-up-22.html +++ b/blog/2014/09/12/community-round-up-22.html @@ -190,7 +190,7 @@ Acknowledgements diff --git a/blog/2014/09/16/react-v0.11.2.html b/blog/2014/09/16/react-v0.11.2.html index 0eb8cf2496..98e3283c9d 100644 --- a/blog/2014/09/16/react-v0.11.2.html +++ b/blog/2014/09/16/react-v0.11.2.html @@ -156,7 +156,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/09/24/testing-flux-applications.html b/blog/2014/09/24/testing-flux-applications.html index 79982f89c9..f3c2a9abb8 100644 --- a/blog/2014/09/24/testing-flux-applications.html +++ b/blog/2014/09/24/testing-flux-applications.html @@ -372,7 +372,7 @@ Acknowledgements diff --git a/blog/2014/10/14/introducing-react-elements.html b/blog/2014/10/14/introducing-react-elements.html index 8f0b459447..8e3ffb1aec 100644 --- a/blog/2014/10/14/introducing-react-elements.html +++ b/blog/2014/10/14/introducing-react-elements.html @@ -254,7 +254,7 @@ Acknowledgements diff --git a/blog/2014/10/16/react-v0.12-rc1.html b/blog/2014/10/16/react-v0.12-rc1.html index 60f7c9577b..61c7fcb00e 100644 --- a/blog/2014/10/16/react-v0.12-rc1.html +++ b/blog/2014/10/16/react-v0.12-rc1.html @@ -205,7 +205,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/10/17/community-roundup-23.html b/blog/2014/10/17/community-roundup-23.html index 6108faa4ce..572707e8bf 100644 --- a/blog/2014/10/17/community-roundup-23.html +++ b/blog/2014/10/17/community-roundup-23.html @@ -224,7 +224,7 @@ Acknowledgements diff --git a/blog/2014/10/27/react-js-conf.html b/blog/2014/10/27/react-js-conf.html index d552eb25a3..0d493933eb 100644 --- a/blog/2014/10/27/react-js-conf.html +++ b/blog/2014/10/27/react-js-conf.html @@ -118,7 +118,7 @@ Acknowledgements diff --git a/blog/2014/10/28/react-v0.12.html b/blog/2014/10/28/react-v0.12.html index 393e78b863..e4383e7ae1 100644 --- a/blog/2014/10/28/react-v0.12.html +++ b/blog/2014/10/28/react-v0.12.html @@ -221,7 +221,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/11/24/react-js-conf-updates.html b/blog/2014/11/24/react-js-conf-updates.html index 24db3f2ee4..73971577c4 100644 --- a/blog/2014/11/24/react-js-conf-updates.html +++ b/blog/2014/11/24/react-js-conf-updates.html @@ -145,7 +145,7 @@ until the next conference. All the talks will be recorded and put online shortly Acknowledgements diff --git a/blog/2014/11/25/community-roundup-24.html b/blog/2014/11/25/community-roundup-24.html index 1e0794c316..d0ff9351bf 100644 --- a/blog/2014/11/25/community-roundup-24.html +++ b/blog/2014/11/25/community-roundup-24.html @@ -181,7 +181,7 @@ Acknowledgements diff --git a/blog/2014/12/18/react-v0.12.2.html b/blog/2014/12/18/react-v0.12.2.html index 8193635fa9..2f5bf9e0fb 100644 --- a/blog/2014/12/18/react-v0.12.2.html +++ b/blog/2014/12/18/react-v0.12.2.html @@ -140,7 +140,7 @@ Minified build for production: Acknowledgements diff --git a/blog/2014/12/19/react-js-conf-diversity-scholarship.html b/blog/2014/12/19/react-js-conf-diversity-scholarship.html index c0abf265e5..1e658b1bb2 100644 --- a/blog/2014/12/19/react-js-conf-diversity-scholarship.html +++ b/blog/2014/12/19/react-js-conf-diversity-scholarship.html @@ -141,7 +141,7 @@ Facebook will make determinations on scholarship recipients in its sole discreti Acknowledgements diff --git a/blog/all.html b/blog/all.html index 52d4f96c72..f260367272 100644 --- a/blog/all.html +++ b/blog/all.html @@ -193,7 +193,7 @@ Acknowledgements diff --git a/blog/index.html b/blog/index.html index 8cd7367842..54fb2f48e5 100644 --- a/blog/index.html +++ b/blog/index.html @@ -437,7 +437,7 @@ Minified build for production: Acknowledgements diff --git a/blog/page10/index.html b/blog/page10/index.html index 8d473418af..53059c87c3 100644 --- a/blog/page10/index.html +++ b/blog/page10/index.html @@ -371,7 +371,7 @@ Acknowledgements diff --git a/blog/page11/index.html b/blog/page11/index.html index bc915b74a6..2af6f3f640 100644 --- a/blog/page11/index.html +++ b/blog/page11/index.html @@ -412,7 +412,7 @@ If you were using React without JSX previously, your code should still work.Acknowledgements diff --git a/blog/page12/index.html b/blog/page12/index.html index fb7a08fe59..cfe480e3d2 100644 --- a/blog/page12/index.html +++ b/blog/page12/index.html @@ -435,7 +435,7 @@ but if you are interested in the nuts and bolts Acknowledgements diff --git a/blog/page13/index.html b/blog/page13/index.html index 538340ad20..3d7be909a1 100644 --- a/blog/page13/index.html +++ b/blog/page13/index.html @@ -123,7 +123,7 @@ Acknowledgements diff --git a/blog/page2/index.html b/blog/page2/index.html index 926a38fc50..3cdddc28a7 100644 --- a/blog/page2/index.html +++ b/blog/page2/index.html @@ -786,7 +786,7 @@ Minified build for production: Acknowledgements diff --git a/blog/page3/index.html b/blog/page3/index.html index e383313514..ed180cde35 100644 --- a/blog/page3/index.html +++ b/blog/page3/index.html @@ -396,7 +396,7 @@ This is not the intended way to use React but can be useful as last resort if yo Acknowledgements diff --git a/blog/page4/index.html b/blog/page4/index.html index c268c46557..69050807a3 100644 --- a/blog/page4/index.html +++ b/blog/page4/index.html @@ -583,7 +583,7 @@ Minified build for production: Acknowledgements diff --git a/blog/page5/index.html b/blog/page5/index.html index 59da8ea409..cffc871d28 100644 --- a/blog/page5/index.html +++ b/blog/page5/index.html @@ -303,7 +303,7 @@ Minified build for production: Acknowledgements diff --git a/blog/page6/index.html b/blog/page6/index.html index 3535f4e126..6ff6e26ed0 100644 --- a/blog/page6/index.html +++ b/blog/page6/index.html @@ -586,7 +586,7 @@ Minified build for production: Acknowledgements diff --git a/blog/page7/index.html b/blog/page7/index.html index af17b85ccf..940ed89cd8 100644 --- a/blog/page7/index.html +++ b/blog/page7/index.html @@ -484,7 +484,7 @@ rails s Acknowledgements diff --git a/blog/page8/index.html b/blog/page8/index.html index d008a3ee1d..c3d1e440eb 100644 --- a/blog/page8/index.html +++ b/blog/page8/index.html @@ -460,7 +460,7 @@ Is this some sort of template language? Specifically no. This might have been th Acknowledgements diff --git a/blog/page9/index.html b/blog/page9/index.html index d7b9af98b1..462348ae83 100644 --- a/blog/page9/index.html +++ b/blog/page9/index.html @@ -479,7 +479,7 @@ Acknowledgements diff --git a/docs/addons.html b/docs/addons.html index e0a0cf4ec7..438f2ee17a 100644 --- a/docs/addons.html +++ b/docs/addons.html @@ -424,7 +424,7 @@ Acknowledgements diff --git a/docs/animation.html b/docs/animation.html index 53e9cc6a14..49c81b5ac4 100644 --- a/docs/animation.html +++ b/docs/animation.html @@ -543,7 +543,7 @@ Acknowledgements diff --git a/docs/class-name-manipulation.html b/docs/class-name-manipulation.html index 43ae4aa760..a80c1a435f 100644 --- a/docs/class-name-manipulation.html +++ b/docs/class-name-manipulation.html @@ -434,7 +434,7 @@ Acknowledgements diff --git a/docs/clone-with-props.html b/docs/clone-with-props.html index 249b08f633..1657cb8cd9 100644 --- a/docs/clone-with-props.html +++ b/docs/clone-with-props.html @@ -416,7 +416,7 @@ var clonedComponent = cloneWithProps(originalComponent, { key : originalComponen Acknowledgements diff --git a/docs/complementary-tools-zh-CN.html b/docs/complementary-tools-zh-CN.html new file mode 100644 index 0000000000..08c93d34bc --- /dev/null +++ b/docs/complementary-tools-zh-CN.html @@ -0,0 +1,433 @@ + + + + + + +render(). For example, if you have an array of list items in state and you want to render the count as a string, simply render this.state.listItems.length + ' list items' in your render() method rather than storing it on state.render() based on underlying props and state.JSX 与 HTML 非常相似,但是有些关键区别要注意。
-@@ -436,7 +436,7 @@ Acknowledgements diff --git a/docs/jsx-gotchas.html b/docs/jsx-gotchas.html index b186b05e1b..aa0f5b9470 100644 --- a/docs/jsx-gotchas.html +++ b/docs/jsx-gotchas.html @@ -436,7 +436,7 @@ Acknowledgements diff --git a/docs/jsx-in-depth-zh-CN.html b/docs/jsx-in-depth-zh-CN.html index 7e7cc95867..b088001d90 100644 --- a/docs/jsx-in-depth-zh-CN.html +++ b/docs/jsx-in-depth-zh-CN.html @@ -407,7 +407,7 @@提示:
+注意:
关于 DOM 的区别,如行内样式属性
style,参考 DOM 区别
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
-提示:
+注意:
由于 JSX 就是 JavaScript,一些标识符像
@@ -438,7 +438,7 @@class和for不建议作为 XML 属性名。作为替代,React DOM 使用className和htmlFor来做对应的属性。如果你要使用 JSX,这篇 新手入门 教程来教你如何搭建环境。
-提示:
+注意:
JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 @@ -478,7 +478,7 @@ );
-@@ -502,7 +502,7 @@ Acknowledgements diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html index 156310c7a0..6bca4287d6 100644 --- a/docs/jsx-in-depth.html +++ b/docs/jsx-in-depth.html @@ -450,7 +450,7 @@ ReactElement as an object literal to bypass the validation code in提示:
+注意:
JSX 类似于 HTML,但不完全一样。参考 JSX 陷阱 了解主要不同。
React.createElement.Namespaced Components #
-If you are building a component that have a lot of childrens, or if you are building your application with some categories of reusable components (like a
+Formcategory), to make more simple and easiest, you can use a namespaced component to avoid something like this:If you are building a component that has many children, or if you are building your application with some categories of reusable components (like a
Formcategory), to make it simpler and easier, you can use a namespaced component to avoid something like this:-var Form = MyFormComponent; var FormRow = Form.Row; var FormLabel = Form.Label; @@ -465,7 +465,7 @@ ReactElement as an object literal to bypass the validation code in </Form> );Instead of declare a bunch of variables at the top, you'll get just one component that have other components as attributes.
+Instead of declaring a bunch of variables at the top, you'll get just one component that has other components as attributes.
-var Form = MyFormComponent; var App = ( @@ -477,7 +477,7 @@ ReactElement as an object literal to bypass the validation code in </Form> );For doing this, you just need to create your "sub-components" as attributes of the main component:
+To do this, you just need to create your "sub-components" as attributes of the main component:
diff --git a/docs/jsx-spread-zh-CN.html b/docs/jsx-spread-zh-CN.html index 0ac091713a..c1ab74a7eb 100644 --- a/docs/jsx-spread-zh-CN.html +++ b/docs/jsx-spread-zh-CN.html @@ -429,7 +429,7 @@ Acknowledgements diff --git a/docs/jsx-spread.html b/docs/jsx-spread.html index d1100ab503..a46db34923 100644 --- a/docs/jsx-spread.html +++ b/docs/jsx-spread.html @@ -429,7 +429,7 @@ Acknowledgements diff --git a/docs/more-about-refs.html b/docs/more-about-refs.html index 3010764934..fed5502d42 100644 --- a/docs/more-about-refs.html +++ b/docs/more-about-refs.html @@ -517,7 +517,7 @@ Acknowledgements diff --git a/docs/multiple-components-zh-CN.html b/docs/multiple-components-zh-CN.html new file mode 100644 index 0000000000..db9ff20447 --- /dev/null +++ b/docs/multiple-components-zh-CN.html @@ -0,0 +1,587 @@ + + + + + + +var MyFormComponent = React.createClass({ ... }); MyFormComponent.Row = React.createClass({ ... }); @@ -558,7 +558,7 @@ pair of curly braces ({}) instead of quotes (""Acknowledgements复合组件 | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + ++ + + + + ++ + + + + diff --git a/docs/multiple-components.html b/docs/multiple-components.html index 7c203a75f4..b405bb8d72 100644 --- a/docs/multiple-components.html +++ b/docs/multiple-components.html @@ -558,7 +558,7 @@ Acknowledgements diff --git a/docs/perf.html b/docs/perf.html index 81a6ad6029..fee167f2a9 100644 --- a/docs/perf.html +++ b/docs/perf.html @@ -453,7 +453,7 @@ Acknowledgements diff --git a/docs/pure-render-mixin.html b/docs/pure-render-mixin.html index 50580d5466..121bb551e3 100644 --- a/docs/pure-render-mixin.html +++ b/docs/pure-render-mixin.html @@ -424,7 +424,7 @@ Acknowledgements diff --git a/docs/reconciliation.html b/docs/reconciliation.html index 2571b2ed25..a5b872d9cc 100644 --- a/docs/reconciliation.html +++ b/docs/reconciliation.html @@ -483,7 +483,7 @@ renderB: <div><span key=Acknowledgements diff --git a/docs/reusable-components-zh-CN.html b/docs/reusable-components-zh-CN.html new file mode 100644 index 0000000000..1cba9dadb6 --- /dev/null +++ b/docs/reusable-components-zh-CN.html @@ -0,0 +1,579 @@ + + + + + + ++ + + + + + + ++++ 复合组件 + Edit on GitHub +
+ + +目前为止,我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一:可组合性(composability)。
+动机:关注分离 #
+通过复用那些接口定义良好的组件来开发新的模块化组件,我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的不同关注面分离。如果为程序开发一套自定义的组件库,那么就能以最适合业务场景的方式来展示你的用户界面。
+组合实例 #
+一起来使用 Facebook Graph API 开发显示个人图片和用户名的简单 Avatar 组件吧。
+var Avatar = React.createClass({ + render: function() { + return ( + <div> + <ProfilePic username={this.props.username} /> + <ProfileLink username={this.props.username} /> + </div> + ); + } +}); + +var ProfilePic = React.createClass({ + render: function() { + return ( + <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> + ); + } +}); + +var ProfileLink = React.createClass({ + render: function() { + return ( + <a href={'http://www.facebook.com/' + this.props.username}> + {this.props.username} + </a> + ); + } +}); + +React.render( + <Avatar username="pwh" />, + document.getElementById('example') +); +从属关系 #
+上面例子中,
+ +Avatar拥有ProfilePic和ProfileLink的实例。拥有者就是给其它组件设置props的那个组件。更正式地说, +如果组件Y在render()方法是创建了组件X,那么Y就拥有X。上面讲过,组件不能修改自身的props- 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的,而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中,
+Avatar拥有div、ProfilePic和ProfileLink实例,div是ProfilePic和ProfileLink实例的父级(但不是拥有者)。子级 #
+实例化 React 组件时,你可以在开始标签和结束标签之间引用在React 组件或者Javascript 表达式:
++<Parent><Child /></Parent> ++
Parent能通过专门的this.props.childrenprops 读取子级。this.props.children是一个不透明的数据结构: 通过 React.Children 工具类 来操作。子级校正(Reconciliation) #
+校正就是每次 render 方法调用后 React 更新 DOM 的过程。 一般情况下,子级会根据它们被渲染的顺序来做校正。例如,下面代码描述了两次渲染的过程:
++// 第一次渲染 +<Card> + <p>Paragraph 1</p> + <p>Paragraph 2</p> +</Card> +// 第二次渲染 +<Card> + <p>Paragraph 2</p> +</Card> +直观来看,只是删除了
+<p>Paragraph 1</p>。事实上,React 先更新第一个子级的内容,然后删除最后一个组件。React 是根据子级的顺序来校正的。子组件状态管理 #
+对于大多数组件,这没什么大碍。但是,对于使用
+ +this.state来在多次渲染过程中里维持数据的状态化组件,这样做潜在很多问题。多数情况下,可以通过隐藏组件而不是删除它们来绕过这些问题。
+// 第一次渲染 +<Card> + <p>Paragraph 1</p> + <p>Paragraph 2</p> +</Card> +// 第二次渲染 +<Card> + <p style={{display: 'none'}}>Paragraph 1</p> + <p>Paragraph 2</p> +</Card> +动态子级 #
+如果子组件位置会改变(如在搜索结果中)或者有新组件添加到列表开头(如在流中)情况会变得更加复杂。如果子级要在多个渲染阶段保持自己的特征和状态,在这种情况下,你可以通过给子级设置惟一标识的
+key来区分。+render: function() { + var results = this.props.results; + return ( + <ol> + {results.map(function(result) { + return <li key={result.id}>{result.text}</li>; + })} + </ol> + ); + } +当 React 校正带有 key 的子级时,它会确保它们被重新排序(而不是破坏)或者删除(而不是重用)。 +
+务必把key添加到子级数组里组件本身上,而不是每个子级内部最外层 HTML 上:+// 错误! +var ListItemWrapper = React.createClass({ + render: function() { + return <li key={this.props.data.id}>{this.props.data.text}</li>; + } +}); +var MyComponent = React.createClass({ + render: function() { + return ( + <ul> + {this.props.results.map(function(result) { + return <ListItemWrapper data={result}/>; + })} + </ul> + ); + } +}); + +// 正确 :) +var ListItemWrapper = React.createClass({ + render: function() { + return <li>{this.props.data.text}</li>; + } +}); +var MyComponent = React.createClass({ + render: function() { + return ( + <ul> + {this.props.results.map(function(result) { + return <ListItemWrapper key={result.id} data={result}/>; + })} + </ul> + ); + } +}); +也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的
+key。但是一定要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序,除了 使用 32位无符号数字做为 key 的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况,React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免:render: function() { + var items = {}; + + this.props.results.forEach(function(result) { + // 如果 result.id 看起来是一个数字(比如短哈希),那么 + // 对象字面量的顺序就得不到保证。这种情况下,需要添加前缀 + // 来确保 key 是字符串。 + items['result-' + result.id] = <li>{result.text}</li>; + }); + + return ( + <ol> + {items} + </ol> + ); + } +数据流 #
+React 里,数据通过上面介绍过的
+props从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding):拥有者通过它的props或state计算出一些值,并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用,所以数据变化会自动在所有被使用的地方自动反映出来。性能提醒 #
+你或许会担心如果一个拥有者有大量子级时,对于数据变化做出响应非常耗费性能。值得庆幸的是执行 JavaScript 非常的快,而且
+ +render()方法一般比较简单,所以在大部分应用里这样做速度极快。此外,性能的瓶颈大多是因为 DOM 更新,而非 JS 执行,而且 React 会通过批量更新和变化检测来优化性能。但是,有时候需要做细粒度的性能控制。这种情况下,可以重写
+ +shouldComponentUpdate()方法返回 false 来让 React 跳过对子树的处理。参考 React reference docs 了解更多。++ + + +注意:
+ +如果在数据变化时让
+shouldComponentUpdate()返回 false,React 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么,并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度,DOM 操作通常才是慢的原因。可复用组件 | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + ++ + + + + ++ + + + + diff --git a/docs/reusable-components.html b/docs/reusable-components.html index 819e4e5791..5070bc1310 100644 --- a/docs/reusable-components.html +++ b/docs/reusable-components.html @@ -555,7 +555,7 @@ a component as children. Acknowledgements diff --git a/docs/special-non-dom-attributes.html b/docs/special-non-dom-attributes.html index 91ed6f3f5e..4194a57ef1 100644 --- a/docs/special-non-dom-attributes.html +++ b/docs/special-non-dom-attributes.html @@ -410,7 +410,7 @@ Acknowledgements diff --git a/docs/tags-and-attributes.html b/docs/tags-and-attributes.html index c4fc794328..04c27d8098 100644 --- a/docs/tags-and-attributes.html +++ b/docs/tags-and-attributes.html @@ -459,7 +459,7 @@ strokeOpacity strokeWidth textAnchor transform version viewBox x1 x2 x y1 y2 y Acknowledgements diff --git a/docs/test-utils.html b/docs/test-utils.html index 4a91794eaf..66107a66fc 100644 --- a/docs/test-utils.html +++ b/docs/test-utils.html @@ -457,7 +457,7 @@ Acknowledgements diff --git a/docs/thinking-in-react.html b/docs/thinking-in-react.html index 9939da7005..e80444ad15 100644 --- a/docs/thinking-in-react.html +++ b/docs/thinking-in-react.html @@ -543,7 +543,7 @@ Acknowledgements diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html index eb25f568ef..bf0fefa03b 100644 --- a/docs/tooling-integration.html +++ b/docs/tooling-integration.html @@ -420,7 +420,7 @@ Acknowledgements diff --git a/docs/top-level-api.html b/docs/top-level-api.html index 7ba589182c..328d147cb1 100644 --- a/docs/top-level-api.html +++ b/docs/top-level-api.html @@ -477,7 +477,7 @@ existing DOM node without overwriting the existing children. Acknowledgements diff --git a/docs/transferring-props-zh-CN.html b/docs/transferring-props-zh-CN.html new file mode 100644 index 0000000000..ee8018ac05 --- /dev/null +++ b/docs/transferring-props-zh-CN.html @@ -0,0 +1,554 @@ + + + + + + ++ + + + + + + ++++ 可复用组件 + Edit on GitHub +
+ + +设计接口的时候,把通用的设计元素(按钮,表单框,布局组件等)拆成接口良好定义的可复用的组件。这样,下次开发相同界面程序时就可以写更少的代码,也意义着更高的开发效率,更少的 Bug 和更少的程序体积。
+Prop 验证 #
+随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入
+propTypes。React.PropTypes提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证propTypes。下面用例子来说明不同验证器的区别:React.createClass({ + propTypes: { + // 可以声明 prop 为指定的 JS 基本类型。默认 + // 情况下,这些 prop 都是可传可不传的。 + optionalArray: React.PropTypes.array, + optionalBool: React.PropTypes.bool, + optionalFunc: React.PropTypes.func, + optionalNumber: React.PropTypes.number, + optionalObject: React.PropTypes.object, + optionalString: React.PropTypes.string, + + // 所有可以被渲染的对象:数字, + // 字符串,DOM 元素或包含这些类型的数组。 + optionalNode: React.PropTypes.node, + + // React 元素 + optionalElement: React.PropTypes.element, + + // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 + optionalMessage: React.PropTypes.instanceOf(Message), + + // 用 enum 来限制 prop 只接受指定的值。 + optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), + + // 指定的多个对象类型中的一个 + optionalUnion: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number, + React.PropTypes.instanceOf(Message) + ]), + + // 指定类型组成的数组 + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + + // 指定类型的属性构成的对象 + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), + + // 特定形状参数的对象 + optionalObjectWithShape: React.PropTypes.shape({ + color: React.PropTypes.string, + fontSize: React.PropTypes.number + }), + + // 以后任意类型加上 `isRequired` 来使 prop 不可空。 + requiredFunc: React.PropTypes.func.isRequired, + + // 不可空的任意类型 + requiredAny: React.PropTypes.any.isRequired, + + // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 + // 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。 + customProp: function(props, propName, componentName) { + if (!/matchme/.test(props[propName])) { + return new Error('Validation failed!'); + } + } + }, + /* ... */ +}); +默认 Prop 值 #
+React 支持以声明式的方式来定义
+props的默认值。+var ComponentWithDefaultProps = React.createClass({ + getDefaultProps: function() { + return { + value: 'default value' + }; + } + /* ... */ +}); +当父级没有传入 props 时,
+getDefaultProps()可以保证this.props.value有默认值,注意getDefaultProps的结果会被 缓存。得益于此,你可以直接使用 props,而不必写手动编写一些重复或无意义的代码。传递 Props:小技巧 #
+有一些常用的 React 组件只是对 HTML 做简单扩展。通常,你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 spread 语法会帮到你:
+var CheckLink = React.createClass({ + render: function() { + // 这样会把 CheckList 所有的 props 复制到 <a> + return <a {...this.props}>{'√ '}{this.props.children}</a>; + } +}); + +React.render( + <CheckLink href="/checked.html"> + Click here! + </CheckLink>, + document.getElementById('example') +); +单个子级 #
++
React.PropTypes.element可以限定只能有一个子级传入。var MyComponent = React.createClass({ + propTypes: { + children: React.PropTypes.element.isRequired + }, + + render: function() { + return ( + <div> + {this.props.children} // 有且仅有一个元素,否则会抛异常。 + </div> + ); + } + +}); +Mixins #
+组件是 React 里复用代码最佳方式,但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 跨切面关注点。React 使用
+ +mixins来解决这类问题。一个通用的场景是:一个组件需要定期更新。用
+setInterval()做很容易,但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 生命周期方法 来告知组件创建或销毁的时间。下面来做一个简单的 mixin,使用setInterval()并保证在组件销毁时清理定时器。+var SetIntervalMixin = { + componentWillMount: function() { + this.intervals = []; + }, + setInterval: function() { + this.intervals.push(setInterval.apply(null, arguments)); + }, + componentWillUnmount: function() { + this.intervals.map(clearInterval); + } +}; + +var TickTock = React.createClass({ + mixins: [SetIntervalMixin], // 引用 mixin + getInitialState: function() { + return {seconds: 0}; + }, + componentDidMount: function() { + this.setInterval(this.tick, 1000); // 调用 mixin 的方法 + }, + tick: function() { + this.setState({seconds: this.state.seconds + 1}); + }, + render: function() { + return ( + <p> + React has been running for {this.state.seconds} seconds. + </p> + ); + } +}); + +React.render( + <TickTock />, + document.getElementById('example') +); +关于 mixin 值得一提的优点是,如果一个组件使用了多个 mixin,并用有多个 mixin 定义了同样的生命周期方法(如:多个 mixin 都需要在组件销毁时做资源清理操作),所有这些生命周期方法都保证会被执行到。方法执行顺序是:首先按 mixin 引入顺序执行 mixin 里方法,最后执行组件内定义的方法。
+ + + +传递 Props | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + ++ + + + + ++ + + + + diff --git a/docs/transferring-props.html b/docs/transferring-props.html index 25b601ab79..ef5eed6e21 100644 --- a/docs/transferring-props.html +++ b/docs/transferring-props.html @@ -523,7 +523,7 @@ Acknowledgements diff --git a/docs/tutorial.html b/docs/tutorial.html index 72258dfa7e..add4af66eb 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -791,8 +791,8 @@ }, render: function() { return ( - <form className="commentForm" onSubmit={this.handleSubmit}> - <input type="text" placeholder="Your name" ref="author" /> + <form className="commentForm" onSubmit={this.handleSubmit}> + <input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Say something..." ref="text" /> <input type="submit" value="Post" /> </form> @@ -988,7 +988,7 @@ Acknowledgements diff --git a/docs/two-way-binding-helpers.html b/docs/two-way-binding-helpers.html index 5cfa10f1f2..f56ff656c3 100644 --- a/docs/two-way-binding-helpers.html +++ b/docs/two-way-binding-helpers.html @@ -492,7 +492,7 @@ Acknowledgements diff --git a/docs/update.html b/docs/update.html index a980c30577..d6eba1db63 100644 --- a/docs/update.html +++ b/docs/update.html @@ -461,7 +461,7 @@ Acknowledgements diff --git a/docs/videos.html b/docs/videos.html index 0e064d1734..c0d0a390de 100644 --- a/docs/videos.html +++ b/docs/videos.html @@ -504,7 +504,7 @@ Acknowledgements diff --git a/docs/why-react-zh-CN.html b/docs/why-react-zh-CN.html index 44863b7626..2ee690d387 100644 --- a/docs/why-react-zh-CN.html +++ b/docs/why-react-zh-CN.html @@ -414,7 +414,7 @@ Acknowledgements diff --git a/docs/why-react.html b/docs/why-react.html index d3d2f37811..b43038ed09 100644 --- a/docs/why-react.html +++ b/docs/why-react.html @@ -414,7 +414,7 @@ Acknowledgements diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html index 5d45070927..0c7db95bcb 100644 --- a/docs/working-with-the-browser.html +++ b/docs/working-with-the-browser.html @@ -522,7 +522,7 @@ Currently a handler to this event is ignored on IE8. Acknowledgements diff --git a/downloads.html b/downloads.html index 843b7435bd..147301630d 100644 --- a/downloads.html +++ b/downloads.html @@ -120,7 +120,7 @@ Acknowledgements diff --git a/html-jsx.html b/html-jsx.html index 5eb0ae1597..b9483f88c8 100644 --- a/html-jsx.html +++ b/html-jsx.html @@ -71,7 +71,7 @@ Acknowledgements diff --git a/index.html b/index.html index 1efb031b6f..49ba684e29 100644 --- a/index.html +++ b/index.html @@ -169,7 +169,7 @@ Acknowledgements diff --git a/jsx-compiler.html b/jsx-compiler.html index 78922172e0..39708fd898 100644 --- a/jsx-compiler.html +++ b/jsx-compiler.html @@ -74,7 +74,7 @@ Acknowledgements diff --git a/support.html b/support.html index e24327ae8d..057fc8d6c2 100644 --- a/support.html +++ b/support.html @@ -88,7 +88,7 @@ Acknowledgements diff --git a/tips/children-props-type.html b/tips/children-props-type.html index aec6d3523b..7e335f62b1 100644 --- a/tips/children-props-type.html +++ b/tips/children-props-type.html @@ -433,7 +433,7 @@ Acknowledgements diff --git a/tips/children-undefined.html b/tips/children-undefined.html index c95c28bbef..5b744d1e3e 100644 --- a/tips/children-undefined.html +++ b/tips/children-undefined.html @@ -415,7 +415,7 @@ Acknowledgements diff --git a/tips/communicate-between-components.html b/tips/communicate-between-components.html index 58d07ae398..cc6211c353 100644 --- a/tips/communicate-between-components.html +++ b/tips/communicate-between-components.html @@ -428,7 +428,7 @@ Say your+ + + + + + + ++++ 传递 Props + Edit on GitHub +
+ + +React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。
+ +可以使用 JSX 展开属性 来合并现有的 props 和其它值:
++return <Component {...this.props} more="values" />; +如果不使用 JSX,可以使用一些对象辅助方法如 ES6 的
+Object.assign或 Underscore_.extend。+return Component(Object.assign({}, this.props, { more: 'values' })); +下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。
+手动传递 #
+大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
++var FancyCheckbox = React.createClass({ + render: function() { + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked'; + return ( + <div className={fancyClass} onClick={this.props.onClick}> + {this.props.children} + </div> + ); + } +}); +React.render( + <FancyCheckbox checked={true} onClick={console.log.bind(console)}> + Hello world! + </FancyCheckbox>, + document.body +); +但
+name这个属性怎么办?还有title、onMouseOver这些 props?在 JSX 里使用
+...传递 #有时把所有属性都传下去是不安全或啰嗦的。这时可以使用 解构赋值 中的剩余属性特性来把未知属性批量提取出来。
+ +列出所有要当前使用的属性,后面跟着
+...other。+var { checked, ...other } = this.props; +这样能确保把所有 props 传下去,除了 那些已经被使用了的。
++var FancyCheckbox = React.createClass({ + render: function() { + var { checked, ...other } = this.props; + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; + // `other` 包含 { onClick: console.log } 但 checked 属性除外 + return ( + <div {...other} className={fancyClass} /> + ); + } +}); +React.render( + <FancyCheckbox checked={true} onClick={console.log.bind(console)}> + Hello world! + </FancyCheckbox>, + document.body +); +++ +注意:
+ +上面例子中,
+checked属性也是一个有效的 DOM 属性。如果你没有使用解构赋值,那么可能无意中把它传下去。在传递这些未知的
+other属性时,要经常使用解构赋值模式。var FancyCheckbox = React.createClass({ + render: function() { + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked'; + // 反模式:`checked` 会被传到里面的组件里 + return ( + <div {...this.props} className={fancyClass} /> + ); + } +}); +使用和传递同一个 Prop #
+如果组件需要使用一个属性又要往下传递,可以直接使用
+checked={checked}再传一次。这样做比传整个this.props对象要好,因为更利于重构和语法检查。+var FancyCheckbox = React.createClass({ + render: function() { + var { checked, title, ...other } = this.props; + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; + var fancyTitle = checked ? 'X ' + title : 'O ' + title; + return ( + <label> + <input {...other} + checked={checked} + className={fancyClass} + type="checkbox" + /> + {fancyTitle} + </label> + ); + } +}); +++注意:
+ +顺序很重要,把
+{...other}放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是"checkbox"。剩余属性和展开属性
+...#剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。
+ +这是 ES7 草案 中的试验特性。
++var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; +x; // 1 +y; // 2 +z; // { a: 3, b: 4 } +++注意:
+ +使用 JSX 命令行工具 配合
+--harmony标记来启用 ES7 语法。使用 Underscore 来传递 #
+如果不使用 JSX,可以使用一些库来实现相同效果。Underscore 提供
+ + + +_.omit来过滤属性,_.extend复制属性到新的对象。 +javascript +var FancyCheckbox = React.createClass({ + render: function() { + var checked = this.props.checked; + var other = _.omit(this.props, 'checked'); + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; + return ( + React.DOM.div(_.extend({}, other, { className: fancyClass })) + ); + } +}); +GroceryListcomponent has a list of items generated throug Acknowledgements diff --git a/tips/componentWillReceiveProps-not-triggered-after-mounting.html b/tips/componentWillReceiveProps-not-triggered-after-mounting.html index dec277492c..662693451b 100644 --- a/tips/componentWillReceiveProps-not-triggered-after-mounting.html +++ b/tips/componentWillReceiveProps-not-triggered-after-mounting.html @@ -402,7 +402,7 @@ Acknowledgements diff --git a/tips/controlled-input-null-value.html b/tips/controlled-input-null-value.html index 874719107b..c609eeb709 100644 --- a/tips/controlled-input-null-value.html +++ b/tips/controlled-input-null-value.html @@ -409,7 +409,7 @@ Acknowledgements diff --git a/tips/dom-event-listeners.html b/tips/dom-event-listeners.html index a247ceaf83..79ba6bc538 100644 --- a/tips/dom-event-listeners.html +++ b/tips/dom-event-listeners.html @@ -433,7 +433,7 @@ Acknowledgements diff --git a/tips/expose-component-functions.html b/tips/expose-component-functions.html index 87b0c437cb..45d297ba2d 100644 --- a/tips/expose-component-functions.html +++ b/tips/expose-component-functions.html @@ -446,7 +446,7 @@ Acknowledgements diff --git a/tips/false-in-jsx.html b/tips/false-in-jsx.html index 07c587f6f4..0485d45029 100644 --- a/tips/false-in-jsx.html +++ b/tips/false-in-jsx.html @@ -411,7 +411,7 @@ Acknowledgements diff --git a/tips/if-else-in-JSX.html b/tips/if-else-in-JSX.html index 98f2f29670..1fbbdfad87 100644 --- a/tips/if-else-in-JSX.html +++ b/tips/if-else-in-JSX.html @@ -433,7 +433,7 @@ components should be used. Acknowledgements diff --git a/tips/initial-ajax.html b/tips/initial-ajax.html index e89cc94c3e..f3fb203430 100644 --- a/tips/initial-ajax.html +++ b/tips/initial-ajax.html @@ -438,7 +438,7 @@ Acknowledgements diff --git a/tips/inline-styles.html b/tips/inline-styles.html index 93c07133b5..79ce711c7b 100644 --- a/tips/inline-styles.html +++ b/tips/inline-styles.html @@ -410,7 +410,7 @@ Acknowledgements diff --git a/tips/introduction.html b/tips/introduction.html index a939bc4370..a810b77291 100644 --- a/tips/introduction.html +++ b/tips/introduction.html @@ -400,7 +400,7 @@ Acknowledgements diff --git a/tips/maximum-number-of-jsx-root-nodes.html b/tips/maximum-number-of-jsx-root-nodes.html index 3b62081ca6..f7b64062b6 100644 --- a/tips/maximum-number-of-jsx-root-nodes.html +++ b/tips/maximum-number-of-jsx-root-nodes.html @@ -402,7 +402,7 @@ Acknowledgements diff --git a/tips/props-in-getInitialState-as-anti-pattern.html b/tips/props-in-getInitialState-as-anti-pattern.html index a744e6ddbb..1b0ccc5a99 100644 --- a/tips/props-in-getInitialState-as-anti-pattern.html +++ b/tips/props-in-getInitialState-as-anti-pattern.html @@ -449,7 +449,7 @@ Acknowledgements diff --git a/tips/references-to-components.html b/tips/references-to-components.html index 4df7d6ff9f..7e87a61359 100644 --- a/tips/references-to-components.html +++ b/tips/references-to-components.html @@ -414,7 +414,7 @@ Acknowledgements diff --git a/tips/self-closing-tag.html b/tips/self-closing-tag.html index 57238525aa..479c4d88b0 100644 --- a/tips/self-closing-tag.html +++ b/tips/self-closing-tag.html @@ -406,7 +406,7 @@ Acknowledgements diff --git a/tips/style-props-value-px.html b/tips/style-props-value-px.html index bd2e197b16..cc326c0def 100644 --- a/tips/style-props-value-px.html +++ b/tips/style-props-value-px.html @@ -424,7 +424,7 @@ Acknowledgements diff --git a/tips/use-react-with-other-libraries.html b/tips/use-react-with-other-libraries.html index c68910574f..cd1e210311 100644 --- a/tips/use-react-with-other-libraries.html +++ b/tips/use-react-with-other-libraries.html @@ -424,7 +424,7 @@ Acknowledgements