Question

我正在查看高阶组件的react文档，偶然发现了一个示例，在该示例中，您可以记录特定组件的道具

         MultiLayerConfiguration EDGE_PERCEPTRON = new NeuralNetConfiguration.Builder()
                    .seed(seed)
                    .l2(0.0005)
                    .weightInit(WeightInit.XAVIER)
                    .updater(new Nesterovs(new MapSchedule(ScheduleType.ITERATION, lrSchedule)))
                    .list()
                    .layer(0, new ConvolutionLayer.Builder(8, 8)
                            .stride(2, 2)
                            .padding(0, 0)
                            .nIn(channels)
                            .nOut(filtersize10)
                            .activation(Activation.IDENTITY)
                            .build())
                    .layer(1, new ConvolutionLayer.Builder(4, 4)
                            .stride(2, 2)
                            .padding(0, 0)
                            .nOut(filtersize20)
                            .activation(Activation.IDENTITY)
                            .build())
                    .layer(2, new SubsamplingLayer.Builder(SubsamplingLayer.PoolingType.MAX)
                            .kernelSize(2, 2)
                            .stride(1, 1)
                            .padding(0, 0)
                            .build())
                    .layer(3, new DenseLayer.Builder().activation(Activation.SIGMOID)
                            .nOut(outputSize).build())
                    .layer(4, new OutputLayer.Builder(LossFunctions.LossFunction.XENT)
                            .nOut(outputSize)
                            .activation(Activation.SIGMOID)
                            .build())
                    .setInputType(InputType.convolutionalFlat(height, width, channels))
                    .backprop(true).pretrain(false).build();

渲染组件时，插入

有区别

function logProps(WrappedComponent) {
return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

和

{...this.props}

从本质上来说，它们都会将给定的道具返回给组件，是否存在最佳实践或特定用例，其中何时比另一个更好？

来自关于props.children的react文档

{props.children}

在我看来，这与{... this.props}

中的用例相同

Answer 1

{...this.props}和props.children用于实现不同的目标。

使用

{...this.props}是为了使赋予该特定组件的所有道具都spread放在另一个道具上。以docs为例：

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

这两种情况具有相同的结果。因此，spread是从HOC传递道具的最佳方法。

另一方面，

props.children用于将子级传递给另一个组件。这是React分配的一个特定的prop，您无法在属性中明确找到。该道具位于组件的打开和关闭标签内。 docs中的另一个示例：

<MyComponent>Hello world!</MyComponent>

// Can be used in the component as:
function MyComponent() {
  return (
    <div>{props.children}</div>
  );
}

此处，MyComponent将向DOM发出<div>Hello World</div>。

在使用HOC进行反应时向包装组件渲染道具

1 个答案: