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

Question

我是 javascript / React 的真正初学者...但我正在尝试基于字符串值设置标签。为什么 widget1 无法实例化？ （我得到一个未捕获的 ReferenceError: FooA is not defined 错误）导入 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

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

将组件类作为道具传递

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} />

将组件实例作为道具传递：

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>