<p><code></p> <p><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>当中的组件嵌套很常见,外部组件暴露的属性也许会干一些复杂的实现细节。<br /> 我们可以使用属性延伸覆盖原来的属性值</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var Component = <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({<br /> render: function () {<br /> return </p> <div {...this.props} title=&quot;zzz&quot;><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a> is a <a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a></div> <p> }<br /> });</p> <p><a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>.render(<br /> <Component name=&quot;xxx&quot; title=&quot;yyy&quot;></Component>,<br /> document.body<br /> );<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-keyword">var</span> Component = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>({ render: function () { <span class="hljs-keyword">return</span> &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> {...<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.props} title=<span class="hljs-string">"zzz"</span>&gt;<span class="hljs-keyword">this</span> <span class="hljs-keyword">is</span> a div&lt;/div&gt; } }); React.render( &lt;Component name=<span class="hljs-string">"xxx"</span> title=<span class="hljs-string">"yyy"</span>/&gt;, document.body ); </code></pre> <h1 id="articleHeader0">手动转移</h1> <p>大部分情况你应该明确的向下传递属性,这样可以确保你只需要暴露内部<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>的一个子集。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var FancyCheckbox = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({<br /> render: function() {<br /> var fancyClass = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.checked ? 'FancyChecked' : 'FancyUnchecked';<br /> return (</p> <div className={fancyClass} onClick={this.props.onClick}> {this.props.children} </div> <p> );<br /> }<br /> });<br /> React.render(<br /> <FancyCheckbox checked={true} onClick={console.log.bind(console)}><br /> Hello world!<br /> </FancyCheckbox>,<br /> document.getElementById('example')<br /> );<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> FancyCheckbox = React.createClass({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> fancyClass = <span class="hljs-keyword">this</span>.props.checked ? <span class="hljs-string">'FancyChecked'</span> : <span class="hljs-string">'FancyUnchecked'</span>; <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{fancyClass}</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.props.onClick}</span>&gt;</span> {this.props.children} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ); } }); React.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">FancyCheckbox</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">{true}</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{console.log.bind(console)}</span>&gt;</span> Hello world! <span class="hljs-tag">&lt;/<span class="hljs-name">FancyCheckbox</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example'</span>) ); </code></pre> <p>但是name属性、title属性或者onMouseOver属性呢?</p> <h1 id="articleHeader1">利用<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a> ... 转移</h1> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var FancyCheckbox = React.createClass({ render: function() { var { checked, ...other } = this.props; var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; // `other` contains { onClick: console.log } but not the checked property return ( <div {...other} className={fancyClass} ></span><br /> );<br /> }<br /> });<br /> React.render(<br /> <FancyCheckbox checked={true} onClick={console.log.bind(console)}><br /> Hello world!<br /> </FancyCheckbox>,<br /> document.body<br /> );<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> FancyCheckbox = React.createClass({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> { checked, ...other } = <span class="hljs-keyword">this</span>.props; <span class="hljs-keyword">var</span> fancyClass = checked ? <span class="hljs-string">'FancyChecked'</span> : <span class="hljs-string">'FancyUnchecked'</span>; <span class="hljs-comment">// `other` contains { onClick: console.log } but not the checked property</span> <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> {<span class="hljs-attr">...other</span>} <span class="hljs-attr">className</span>=<span class="hljs-string">{fancyClass}</span> /&gt;</span> ); } }); React.render( <span class="hljs-tag">&lt;<span class="hljs-name">FancyCheckbox</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">{true}</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{console.log.bind(console)}</span>&gt;</span> Hello world! <span class="hljs-tag">&lt;/<span class="hljs-name">FancyCheckbox</span>&gt;</span>, document.body ); </span></code></pre> <blockquote> <p>var { checked, ...other } = this.props;使用了ES7的结构化赋值,所以引入时要加入harmony,如下:</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/jsx;harmony=true&quot;><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;script <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text/jsx;harmony=true"</span>&gt; </code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/react/react_43871.html