Question

我有2个JSX文件 1）Main.jsx

     ReactDOM.render(
    <SearchExample items={libraries} />,
    document.getElementById('container')
);

ReactDOM.render(
    <ParentComponent />,
    document.getElementById('container11')
);

2）ParentComponent.jsx

var ChildComponent = React.createClass({
    render: function () {
        return (
            <div>
                <div className="prompt">Add a click handler to this button so that when clicked, performMagic is called in the parent component.</div>
                <button onClick={this.props.onMagicClick}>Do Magic</button>
            </div>
        );
    }
});

var ParentComponent = React.createClass({
    performMagic: function () {
        alert('TAADAH!');
    },

    render: function () {
        return (
            <div>
                <ChildComponent onMagicClick={this.performMagic} />
            </div>
        );
    }
});

这里我无法调用ParentComponent。注意：我不想使用Web Pack或其他捆绑包配置。也不想使用脚本标记。

另外，我的主文件依赖于多个文件。如SearchExample.jsx，ParentComponent.jsx等。

这里可能是SearchExample.jsx还取决于其他一些包含静态值/配置/属性的文件。

我无法在没有任何其他库的情况下使用require和import。

由于

Answer 1

你想要什么是不可能的。如果你不导入或将所有文件都放在同一个文件中。也许可以解释更多你想做的事情

明智地分离JSX文件模块

1 个答案: