Question

在这个问题上我的意思是。想象一下，我想显示一个名为“表单”的组件，并且在“表单”内部有一个名为“ checkboxex”的组件列表

正常的操作方法如下：

padding-bottom: 100%

然后在Form内部，我将其映射（Array.map）

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

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

有人可以向我解释一下是否可能，有什么区别？非常感谢！

Answer 1

在类似组件内传递的所有内容都会自动转换为children道具。您可以像这样在Form内部访问它们：

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

Answer 2

您提到的模式是2018/09/13 21:29:38[error]11#11: Failed to download rollouts: UNAVAILABLE: Failed to connect to the service management, Response body: 2018/09/13 21:30:08 [error] 11#11: servicemanagement.googleapis.com could not be resolved (110: Operation timed out) 2018/09/13 21:30:08 [error] 11#11: servicemanagement.googleapis.com could not be resolved (110: Operation timed out) 2018/09/13 21:30:08 [error] 11#11: servicemanagement.googleapis.com could not be resolved (110: Operation timed out) 2018/09/13 21:30:38 [error] 11#11: servicemanagement.googleapis.com could not be resolved (110: Operation timed out) 2018/09/13 21:30:38 [error] 11#11: servicemanagement.googleapis.com could not be resolved (110: Operation timed out) 2018/09/13 21:30:38 [error] 11#11: servicemanagement.googleapis.com could not be resolved (110: Operation timed out)道具模式，其中嵌套的children作为子代传递给组件。

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

中

{}

您的<Form> { checkboxes.map(id => <Checkbox key={id} id={id} />) } </Form>组件Form方法看起来像这样。

render

如果您传递的子代是一个函数，则只需在render() { <div> {this.props.children} </div> }组件中调用它即可。

Form

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

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

Answer 3

通常，两种方法都是相同的。他们以某种方式在父组件（Form）中呈现了一些JSX。

在第一个中，您要将数据传递给父级，然后以某种方式希望在其子级中使用此数据。

在第二个中，您打算映射数据，然后将带有此数据的子组件传递给父组件。因此，实际上，您正在向父母传递一个道具：children。您的问题并不能反映您的需求。但是，您要问的是区别。差异可能是您在Form中及其子元素中使用方式和用途的逻辑。

考虑这种情况。您在handleClick组件中有一个Form方法，并且想要将此方法传递给子组件，每个Checkbox。这是两个版本。

没有儿童道具

const checkboxes = [1, 2, 3];

class App extends React.Component {
  render() {
    return (
      <div>
        <Form checkboxes={checkboxes} />
      </div>
    );
  }
}

const Form = props => {
  const handleClick = id => console.log("id is", id);
  return (
    <div>
      {props.checkboxes.map(id => (
        <Checkbox id={id} key={id} handleClick={handleClick} />
      ))}
    </div>
  );
};

const Checkbox = props => {
  const handleClick = () => props.handleClick(props.id);

  return (
    <div onClick={handleClick} style={{ padding: "10px" }}>
      This is Checkbox and id is <strong>{props.id}</strong>
      .Click me and look the console.
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

有儿童道具

const checkboxes = [1, 2, 3];

class App extends React.Component {
  render() {
    return (
      <div>
        <Form>
          {checkboxes.map(id => (
            <Checkbox id={id} key={id} />
          ))}
        </Form>
      </div>
    );
  }
}

const Form = props => {
  const handleClick = id => console.log("id is", id);
  return (
    <div>
      {React.Children.map(props.children, child =>
        React.cloneElement(child, {
          handleClick
        })
      )}
    </div>
  );
};

const Checkbox = props => {
  const handleClick = () => props.handleClick(props.id);
  return (
    <div style={{ padding: "10px" }} onClick={handleClick}>
      This is Checkbox and id is <strong>{props.id}</strong>
      .Click me and look the console.
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

您可以在这里看到斗争：)因此，您可以根据自己的需要选择其中之一。如果您没有像第二个示例那样设置逻辑，则可以使用children道具。实际上，您可以使用此逻辑创建可重用的组件。我只是想在这里展示一个优势案例。

如何在React中不带道具的情况下将数据传递给组件？

3 个答案: