为什么导入类会使此代码失败？

Question

我是javascript / React的真正初学者......但我正在尝试根据字符串值设置标签。为什么widget1无法实例化？ （我得到一个未被捕获的ReferenceError：FooA未定义错误）导入react组件与在同一文件中定义它有什么不同？

import React, {Component} from "react";
import ReactDOM from "react-dom";

// Assume FooA and FooB have identical definitions
import FooA from './fooa.jsx'

class FooB extends Component {
    render() {
         return(<p>Hello A</p>);
    }
};

class Splash extends Component {
    render() {
        var widget1 = eval('new ' + "FooA")
        var widget2 = eval('new ' + "FooB")
        return (
            <div>
                {(widget1.render())}
                {(widget2.render())}
            </div>
         )
    };
}

ReactDOM.render(<Splash/>, container);

我通过webpack传递此信息以获取单个.js文件。

有没有更好的方法来实现这一目标？

Answer 1

你不必实例化组件，React会为你做这件事。

您的Splash组件应如下所示：

class Splash extends Component {
    render() {
        return (
            <div>
                <FooA />
                <FooB />
            </div>
         )
    };
}

现在让我们想要一些逻辑来确定必须呈现哪个组件：

class Splash extends Component {
    let comp = (<FooA />);
    if(some condition)
      comp = (<FooB />);

    render() {
        return (
            <div>
                {comp}
            </div>
         )
    };
}

现在让你想要只是参数化文本：

class FooA extends Component {
    render() {
         return(<p>this.props.textToShow</p>);
    }
};

class Splash extends Component {
    let text = 'whatever text you want to show';
    render() {
        return (
            <div>
              <FooA textToShow={text}/>
            </div>
         )
    };
}

您也可以将其他组件作为道具传递：

class FooA extends Component {
    render() {
         return(
           <p>Some text</p>
           {this.props.child}
         );
    }
};

class FooAChild extends Component {
    render() {
         return(
           <p>I am a child</p>
         );
    }
};

class Splash extends Component {
    let child = (<FooAChild />);
    render() {
        return (
            <div>
            <FooA child={child}/>
            </div>
         )
    };
}

Answer 2

你从错误的角度来解决这个问题。如果您想使组件能够以通用，可重用的方式呈现其他组件，您可以采取以下三种方法：

将组件类作为prop

传递

class Splash extends Component {
    render() {
        let heading = this.props.heading;

        // These have to start with a capital letter, otherwise
        // JSX assumes 'widget1' is a normal HTML element.
        let Widget1 = this.props.widget1;
        let Widget2 = this.props.widget2;

        return (
            <div>
                <h1>{heading}</h1>
                <Widget1 />
                <Widget2 />
            </div>
         )
    };
}

// This can then be used like so:

<Splash heading="My Generic Splash" widget1={FooA} widget2={FooB} />

将组件实例作为prop：

传递

class Splash extends Component {
    render() {
        let heading = this.props.heading;

        let widget1 = this.props.widget1;
        let widget2 = this.props.widget2;

        return (
            <div>
                <h1>{heading}</h1>
                {widget1}
                {widget2}
            </div>
         )
    };
}

// This can then be used like so:

let fooA = <FooA />;

<Splash heading="My Generic Splash" widget1={fooA} widget2={<FooB />} />

将组件作为子项传递：

class Splash extends Component {
    render() {
        let heading = this.props.heading;

        return (
            <div>
                <h1>{heading}</h1>
                {this.props.children}
            </div>
         )
    };
}

// This can then be used like so:

<Splash heading="My Generic Splash">
    <FooA />
    <FooB />
</Splash>