gpt4 book ai didi

javascript - 如何在不使用模块的情况下将 Prop 传递给 child ?

转载 作者:行者123 更新时间:2023-11-30 07:07:08 24 4
gpt4 key购买 nike

目标:从父组件向子组件发送一个属性并渲染它。

问题:

  1. 我无法使用模块,例如我没有使用 npm,这意味着我无法使用 require。示例:从“someLocation”导入 ChildComponent;
  2. 父子组件存在于不同的文件中。
  3. 我正在尝试将 props 从 parent 发送给 child 。

注意:

  • 我不明白为什么我无法将 props 发送到子组件。
  • 我完全知道,如果我将子组件放在父组件文件中,我就可以将我需要的 Prop 发送给子组件。问题是,如果我有 Root > Child > Child > Child > Child 情况,(对我而言)将所有内容都保存在一个文件中变得不可行。否则请随时分享您的意见。

例子:

  • 子组件,存在于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>

最佳答案

您实际上可以更改 <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>

因此您将能够访问 Child文件中的变量 Parent类,所以传递 Prop 就像下面的代码一样简单:

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>
);
};

关于javascript - 如何在不使用模块的情况下将 Prop 传递给 child ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54225441/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com