如何在不使用模块的情况下将道具传递给孩子？

Question

目标：从父级组件向子级发送属性并进行渲染。

问题：

我无法使用模块，例如我未使用npm，这意味着require对我不可用。 示例： import ChildComponent from 'someLocation';
父组件和子组件存在于不同的文件中。
我正在尝试将道具从父母那里送给孩子。

注意：

我处于无法理解为什么无法将道具发送到子组件的情况。
我完全知道，如果将“子代”组件放入“父代”的组件文件中，则能够将所需的道具发送给“子代”。 问题是，如果我有一个“根”>“子”>“子”>“子”>“子”情况，对我而言，将所有内容维护在一个文件中是不可行的。 否则，请随时分享您的意见。

例：

子组件，存在于src/parent/child/index.js

const Child = ({ name }) => {
    return (
        // name is undefined!
        <div>{name}, I am the child component</main>
    );
};

ReactDOM.render(
    React.createElement(Child),
    document.querySelector('#Child')
);

父组件，存在于src/parent/index.js

class Parent extends React.Component {
    render() {
        const name = "Giggles";

        return (
            <div>
                <div id="Child" name={name}></div>
            </div>
        );
    );
};

ReactDOM.render(
    React.createElement(Parent),
    document.querySelector('#Parent')
);

index.html（伪代码）：

<html>
    <head>dependencies in here, react, react-dom and babeljs</head>
    <body>
        <div id="Parent"></div>
    </body>
    <script src="src/parent/index.js"></script>
    <script src="src/parent/child/index.js"></script>
</html>

Answer 1

您实际上可以将<html>标记底部的脚本顺序更改为：

<html>
    <head>dependencies in here, react, react-dom and babeljs</head>
    <body>
        <div id="Parent"></div>
    </body>
    <script src="src/parent/child/index.js"></script>
    <script src="src/parent/index.js"></script>
</html>

因此，您将能够使用Parent类访问文件中的Child变量，因此传递props就像下面的代码一样简单：

class Parent extends React.Component {
    render() {
        const name = "Giggles";

        return (
            <div>
                <Child name={name} />
            </div>
        );
    );
};

另外，您应该在Child所在的文件中删除ReactDOM渲染，因此它将如下所示：

const Child = ({ name }) => {
    return (
        // name is undefined!
        <div>{name}, I am the child component</main>
    );
};

Answer 2

这是一个非常奇怪的限制。您说“请理解”，但我不是，所以我认为您应该解释原因。 它可以帮助您找到更好的解决方案。

这里的问题是双重的：

1）您的Parent组件实际上并没有渲染您的孩子，您只有一个id为Child的div，这在React中是没有意义的。

2）父组件所在的脚本需要以某种方式访问子组件，并且如果没有模块捆绑器，则需要将其放在一个可以像window一样到达的命名空间中

3）您正在渲染两个React树。 要将道具从一个组件传递到另一个组件，它们必须位于同一渲染树中。

const Child = ({ name }) => {
    return (
        <div>{name}, I am the child component</main>
    );
};


window.Child = Child

-

const Child = window.Child

class Parent extends React.Component {
    render() {
        const name = "Giggles";

        return (
            <div>
                <Child name={name} />
            </div>
        );
    );
};

ReactDOM.render(
    React.createElement(Parent),
    document.querySelector('#Parent')
);

如何在不使用模块的情况下将道具传递给孩子？

问题描述

2 个解决方案

解决方案1
8 已采纳 2019-01-16 21:27:11

解决方案2
2 2019-01-16 21:23:54

如何在不使用模块的情况下将道具传递给孩子？

问题描述

2 个解决方案

解决方案1 8 已采纳 2019-01-16 21:27:11

解决方案2 2 2019-01-16 21:23:54

解决方案1
8 已采纳 2019-01-16 21:27:11

解决方案2
2 2019-01-16 21:23:54