动态渲染React组件

作者: 那年
发布时间: 2024-11-12 07:37:06 (5天前)
转自：

4 条回复

0#
回复此人
Colin | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 编辑 </强> ：也许你忘了添加 <code> /** @jsx React.DOM */ </code> 在js的开头？ </p> <P> 您可以使用 <code> React.DOM </code> 虽然： </p> <pre> <code> render: function() { return React.DOM[this.props.component.slug](null, this.props.component.value); } </code> </pre> <P> <a href="http://jsbin.com/rerehutena/2/edit?html,js,output" rel="nofollow"> http://jsbin.com/rerehutena/2/edit?html,js,output </A> </p> <P> 我不是React专家，但我认为每个组件都应该在开头用一个特定的标签构建。因此，它本身可以提供一个明确的目的。 </p> </DIV>

编辑
1#
回复此人
青阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你打算注入渲染的实际组件，你可以做这样的事情，这对于测试非常方便，或者你想要动态注入要渲染的组件的任何原因。 </p> <pre> <code> var MyComponentF=function(ChildComponent){ var MyComponent = React.createClass({ getInitialState: function () { return { }; }, componentDidMount: function () { }, render: function () { return ( <div className="MyComponent"> <ChildComponent></ChildComponent> </div> ); } }); return MyComponent; }; var OtherComponentF=function(){ var OtherComponent = React.createClass({ getInitialState: function () { return { }; }, componentDidMount: function () { }, render: function () { return ( <div className="OtherComponent"> OtherComponent </div> ); } }); return OtherComponent; }; var AnotherComponentF=function(){ var AnotherComponent = React.createClass({ getInitialState: function () { return { }; }, componentDidMount: function () { }, render: function () { return ( <div className="AnotherComponent"> AnotherComponent </div> ); } }); return AnotherComponent; }; $(document).ready(function () { var appComponent = MyComponentF(OtherComponentF()); // OR var appComponent = MyComponentF(AnotherComponentF()); // Results will differ depending on injected component. ReactDOM.render(React.createElement(appComponent), document.getElementById("app-container")); }); </code> </pre> </DIV>

编辑
2#
回复此人
尼拉。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你不应该将组件slug放在花括号中： </p> <pre> <code> var Hello = React.createClass({ render: function() { return <this.props.component.slug className='text'> {this.props.component.value} </this.props.component.slug>; } }); React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body); </code> </pre> <P> 这是一个工作小提琴： <a href="http://jsfiddle.net/kb3gN/6668/"> http://jsfiddle.net/kb3gN/6668/ </A> </p> <P> 此外，您可以找到JSX Compiler有助于调试这些错误： <a href="http://facebook.github.io/react/jsx-compiler.html"> http://facebook.github.io/react/jsx-compiler.html </A> </p> </DIV>

编辑

登录后才能参与评论