动态渲染React组件

Question

在React JSX中,似乎不可能做这样的事情:

render: function() {
  return (
    <{this.props.component.slug} className='text'>
      {this.props.component.value}
    </{this.props.component.slug}>
  );
}

我得到一个解析错误:意外的令牌{.这不是React可以处理的吗？

我正在设计这个组件,以便在引擎盖下,存储的值this.props.component.slug将包含有效的HTML元素(h1,p等).有没有办法让这项工作？

Answer 1

你不应该将组件slug放在花括号中:

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);

这是一个工作小提琴:http://jsfiddle.net/kb3gN/6668/

此外,您可以找到JSX Compiler有助于调试这些错误:http: //facebook.github.io/react/jsx-compiler.html

Answer 2

正如nilgun之前指出的那样,组件段塞不应该用花括号包裹.

如果您决定将其存储在变量中,请确保以大写字母开头.

这是一个例子:

var Home = React.createClass({
  render: function() {
    return (
      <div>
        <h3>This is an input</h3>
        <CustomComponent inputType="input" />
        <h3>This is a text area</h3>
        <CustomComponent inputType="textarea" />
      </div>
    );
  }
});

var CustomComponent = React.createClass({
  render: function() {
    // make sure this var starts with a capital letter
    var InputType = this.props.inputType;
    return <InputType />;
  }
});

React.render(<Home />, document.getElementById('container'));

这是一个工作小提琴:https://jsfiddle.net/janklimo/yc3qcd0u/

Answer 3

如果您打算注入渲染的实际组件，则可以执行类似的操作，这对于测试非常方便，或者您希望动态注入要渲染的组件的任何原因。

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"));
});