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

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

javascript reactjs

Javascript 我如何在不使用模块的情况下将道具传递给孩子？,javascript,reactjs,Javascript,Reactjs,目标：从父组件向子组件发送属性并呈现它问题: 我不能使用模块，例如我没有使用npm，这意味着我无法使用require。示例：从“someLocation”导入子组件父组件和子组件存在于不同的文件中我试着把父母的道具送给孩子注: 我不明白为什么我不能向子组件发送道具我完全知道，如果我将子组件放在父组件文件中，我就能够将所需的道具发送给子组件。问题是，如果我有Root>Child>Child>Child>Child的情况，那么（对我来说）将所有内容都保存在一个文件中是不可行的。请随意分享

目标：从父组件向子组件发送属性并呈现它

问题:

我不能使用模块，例如我没有使用npm，这意味着我无法使用require。示例：

从“someLocation”导入子组件


父组件和子组件存在于不同的文件中
我试着把父母的道具送给孩子
注:

我不明白为什么我不能向子组件发送道具
我完全知道，如果我将子组件放在父组件文件中，我就能够将所需的道具发送给子组件。问题是，如果我有Root>Child>Child>Child>Child的情况，那么（对我来说）将所有内容都保存在一个文件中是不可行的。请随意分享您的意见，否则

例如：

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


index.html（伪代码）：


这里的依赖项，react，react dom和babeljs
这是一个非常奇怪的限制。。你说“请理解”，但我没有，所以我想你应该解释一下原因。它可能会帮助你找到更好的解决方案
这里的问题有两个方面：
1） 您的父组件实际上并没有渲染您的子组件，您只有一个div，其id为child，在React中没有任何意义
2） 父组件所在的脚本需要以某种方式访问子组件，如果没有模块绑定器，则需要将其放在可以访问的命名空间上，如window

3） 您正在渲染两棵树。要将道具从一个组件传递到另一个组件，它们必须位于同一渲染树中
const Child = ({ name }) => {
    return (
        <div>{name}, I am the child component</main>
    );
};


window.Child = Child

constchild=（{name}）=>{
返回(
{name}，我是子组件
);
};
window.Child=Child

--
const Child=window.Child
类父类扩展了React.Component{
render（）{
const name=“咯咯笑”；
返回(
);
);
};
ReactDOM.render(
React.createElement（父元素），
document.querySelector（“#Parent”）
);
这是一个非常奇怪的限制。你说“请理解”，但我不这么认为，所以我认为你应该解释原因。这可能会帮助你找到更好的解决方案
这里的问题有两个方面：
1） 您的父组件实际上并没有渲染您的子组件，您只有一个div，其id为child，在React中没有任何意义
2） 父组件所在的脚本需要以某种方式访问子组件，如果没有模块绑定器，则需要将其放在可以访问的命名空间上，如window

3） 您正在渲染两个React树。若要将道具从一个组件传递到另一个组件，它们必须位于同一渲染树中
const Child = ({ name }) => {
    return (
        <div>{name}, I am the child component</main>
    );
};


window.Child = Child

constchild=（{name}）=>{
返回(
{name}，我是子组件
);
};
window.Child=Child

--
const Child=window.Child
类父类扩展了React.Component{
render（）{
const name=“咯咯笑”；
返回(
);
);
};
ReactDOM.render(
React.createElement（父元素），
document.querySelector（“#Parent”）
);
您实际上可以将
标记底部的脚本顺序更改为：
<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>

此外，还应删除子对象所在文件中的ReactDOM渲染，因此其外观如下所示：
const Child = ({ name }) => {
    return (
        // name is undefined!
        <div>{name}, I am the child component</main>
    );
};

constchild=（{name}）=>{
返回(
//名称未定义！
{name}，我是子组件
);
};
您实际上可以将
标记底部的脚本顺序更改为：
<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>

此外，还应删除子对象所在文件中的ReactDOM渲染，因此其外观如下所示：
const Child = ({ name }) => {
    return (
        // name is undefined!
        <div>{name}, I am the child component</main>
    );
};

constchild=（{name}）=>{
返回(
//名称未定义！
{name}，我是子组件
);
};
当你的意思是你不能使用npm
时，你的意思是你根本不能使用node
吗？你是如何编译JSX的？我可以使用
元素中
的babelJS来编译JSX如果你不能导入或导出，那么你就是不能做出反应。@markmoxx一点也不正确，React的用法与n modules如果说你根本不想使用模块，也就是说没有模块系统，那就更正确了。但这与React没有任何关系，特别是，它只是JavaScript在浏览器中的工作方式。当你说你不能使用npm
，你是说你根本不能使用节点
？你是如何编译JSX的？我是ab可以使用
元素中
中的中的babelJS编译JSX。如果您不能导入或导出，那么您就不能进行反应。@markmoxx一点也不正确，React的用法不依赖于模块。更正确的说法是，您根本不想使用模块，也就是说，没有模块系统。但是，这没有任何东西需要修改o特别是React，它就是JavaScript在浏览器中的工作方式。第一个答案很好！我很惊讶它这么简单，它让我回到reactjs的第一天，这是社区入门的好方法，欢迎！第一个答案很好！我很惊讶它这么简单，它让我回到reactjs的第一天，这是开始通信的好方法unity，欢迎！非常有用诚实地说，你对错误的描述是完美的，我对我的错误有了更好的理解。我给了d3byte的答案，因为关于脚本的建议。感谢你的时间！非常有用诚实地说，你对错误的描述是完美的，我对我的错误有了更好的理解。我由于关于脚本的建议，我已经找到了d3byte的答案。谢谢您的时间！
class Parent extends React.Component {
    render() {
        const name = "Giggles";

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

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