Javascript 在React中，如果没有道具，如何将数据传递给组件？

在这个问题上，我是指这个。假设我想显示一个名为“Form”的组件，在“Form”的内部有一个名为“checkboxex”的组件列表

通常的做法如下：

const checkboxes = [1, 2, 3];
<Form checkBoxes={checkboxex} />

//...
render() {
  <div>
    {this.props.children}
  </div>
}
//...

const复选框=[1,2,3]；

然后在表单中，我只是映射它（Array.map）

我想知道有没有办法做到这一点：

const checkboxes = [1, 2, 3];

<Form>
   checkboxes.map(id =>
    <Checkbox key={id} id={id}/>
</Form>

const复选框=[1,2,3]；
复选框。映射（id=>

---

有谁能解释一下这是否可能以及两者之间的区别吗？非常感谢！

在组件中传递的任何内容都会自动转换为

子项
道具。您可以在
表单中访问它们，如下所示：

const checkboxes = [1, 2, 3];
<Form checkBoxes={checkboxex} />

//...
render() {
  <div>
    {this.props.children}
  </div>
}
//...

/。。。
render（）{
{this.props.children}
}
//...
在组件内部传递的任何内容都会自动转换为
子项
道具。您可以在
表单中访问它们，如下所示：

const checkboxes = [1, 2, 3];
<Form checkBoxes={checkboxex} />

//...
render() {
  <div>
    {this.props.children}
  </div>
}
//...

/。。。
render（）{
{this.props.children}
}
//...
您提到的模式是
子模式
prop模式，其中嵌套的
JSX
作为子模式传递给组件

当您将
JS
作为
JSX
的一部分时，您必须将它们包装在
{}

<Form>
  { checkboxes.map(id => <Checkbox key={id} id={id} />) }
</Form>

如果您传递的子对象是函数，您只需在
表单中调用它

<Form>
  {() => {
    return checkboxes.map(id => <Checkbox key={id} id={id} />)
  }}
</Form>


{() => {
返回复选框。映射（id=>）
}}

您只需调用子项，因为它是作为函数传递的

render() {
      <div>
        {this.props.children()}
      </div>
    }

render（）{
{this.props.children（）}
}
您提到的模式是
子模式
prop模式，其中嵌套的
JSX
作为子模式传递给组件

当您将
JS
作为
JSX
的一部分时，您必须将它们包装在
{}

<Form>
  { checkboxes.map(id => <Checkbox key={id} id={id} />) }
</Form>

如果您传递的子对象是函数，您只需在
表单中调用它

<Form>
  {() => {
    return checkboxes.map(id => <Checkbox key={id} id={id} />)
  }}
</Form>


{() => {
返回复选框。映射（id=>）
}}

您只需调用子项，因为它是作为函数传递的

render() {
      <div>
        {this.props.children()}
      </div>
    }

render（）{
{this.props.children（）}
}
一般来说，这两种方法都是相同的。它们以某种方式在父组件（
表单
）中呈现一些JSX

在第一个示例中，您将数据传递给父级，然后您希望在其子级中使用此数据

在第二个示例中，您打算映射数据，然后将一个子组件传递给具有此数据的父组件。因此，实际上，您正在向父组件传递一个道具：
children
。您的问题并不反映您的需要。但是，您提出的是不同之处。不同之处可能是您将如何使用以及您将在这方面做什么的逻辑e> 表单
及其子项

考虑一下这个场景。在
表单
组件中有一个
handleClick
方法，您希望将它传递给您的子组件，每个
复选框
。以下是两个版本

没有儿童道具


const复选框=[1,2,3]；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
const Form=props=>{
const handleClick=id=>console.log（“id是”，id）；
返回(
{props.checkbox.map（id=>(
))}
);
};
const Checkbox=props=>{
const handleClick=（）=>props.handleClick（props.id）；
返回(
这是复选框，id为{props.id}
.单击我并查看控制台。
);
};
ReactDOM.render（，document.getElementById（“根”）；
一般来说，这两种方法都是相同的。它们以某种方式在父组件（
表单
）中呈现一些JSX

在第一个示例中，您将数据传递给父级，然后您希望在其子级中使用此数据

在第二个示例中，您打算映射数据，然后将一个子组件传递给具有此数据的父组件。因此，实际上，您正在向父组件传递一个道具：
children
。您的问题并不反映您的需要。但是，您提出的是不同之处。不同之处可能是您将如何使用以及您将在这方面做什么的逻辑e> 表单
及其子项

考虑一下这个场景。在
表单
组件中有一个
handleClick
方法，您希望将它传递给您的子组件，每个
复选框
。以下是两个版本

没有儿童道具


const复选框=[1,2,3]；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
const Form=props=>{
const handleClick=id=>console.log（“id是”，id）；
返回(
{props.checkbox.map（id=>(
))}
);
};
const Checkbox=props=>{
const handleClick=（）=>props.handleClick（props.id）；
返回(
这是复选框，id为{props.id}
.单击我并查看控制台。
);
};
ReactDOM.render（，document.getElementById（“根”）；

你不想通过道具？我不明白这个问题？你不想通过道具？我不明白这个问题？我稍后会测试，谢谢你，伙计。我会把你的答案作为正确答案：）@devbid，答案是正确的，但你的问题是错误的：）你仍然在向组件传递道具<代码>子项
是组件的道具。所以，最好根据您的实际需要更改您的问题标题。我稍后会对此进行测试，如果有效，谢谢老兄。我会把你的答案放在正确的位置：）@devbid，答案是正确的，但你的问题是错误的：）你仍然在向组件传递道具<代码>子项
是组件的道具。所以，最好是茶