Question

我有一个简单的复合组件，带有一堆静态子组件：

// @flow
import React, { Component, Children } from 'react';

type Props = {
  children: React.ChildrenArray<React.Node> | React.Node,
}

class Toggle extends Component<Props> {
  static On = props => (props.on ? props.children : null);

  static Off = props => (props.on ? null : props.children);

  static Button = props => (
    <button
      onClick={props.toggle}
      type="button"
      style={{ display: 'inline-block' }}
    >
      <pre>{JSON.stringify(props.on, null, 2)}</pre>
    </button>
  );

  state = { on: false }

  toggle = () => {
    this.setState(
      ({ on }) => ({ on: !on }),
      // maybe this.props.someCallback
      () => console.log(this.state.on),
    );
  }

  render() {
    return Children.map(
      this.props.children,
      childElem => React.cloneElement(childElem, {
        on: this.state.on,
        toggle: this.toggle,
      }),
    );
  }
}

export default Toggle;

当我尝试将其他一些元素放入Toggle子范围时，会发生警告。例如：

<Toggle>
  <Toggle.On>On</Toggle.On>
  <span /> <-- this is savage
  <Toggle.Button />
  <Toggle.Off>Off</Toggle.Off>
</Toggle>

一切正常，但是我的流程类型向我发出警告，如下所示：

Warning: Received `false` for a non-boolean attribute `on`.....
Warning: Invalid value for prop `toggle` on <span> tag....

我该如何安抚这个讨厌的女孩？

Answer 1

谢谢，我认为，正确的解决方法是检查已安装节点的类型是否正确，否则-只需克隆具有常规节点属性的节点即可：

# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtGui, QtCore

class Window_Test3(QtGui.QDialog):

    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        global progress_flag
        self.next_Window = None

        self.setWindowFlags(QtCore.Qt.CustomizeWindowHint|
                            QtCore.Qt.WindowTitleHint|
                            QtCore.Qt.WindowMaximizeButtonHint)
        self.setGeometry(0, 0, 800,480)
        self.setWindowTitle('TEST PROCESSING')

        quit = QtGui.QPushButton('Close', self)

        quit.setGeometry(10, 10, 60, 35)

        test = QtGui.QPushButton('TEST 3', self)
        test.setGeometry(100, 200, 200, 100)


        self.connect(quit, QtCore.SIGNAL('clicked()'),self.reject)
        self.connect(test, QtCore.SIGNAL('clicked()'), self.nextWindow)

    def nextWindow(self):
        self.next_Window.show()
    def setNextWindow(self, nextWindow):
        self.next_Window = nextWindow

class Window_Test2(QtGui.QDialog):
    def __init__(self):
        QtGui.QWidget.__init__(self)
        global progress_flag
        self.next_Window = None

        self.setWindowFlags(QtCore.Qt.CustomizeWindowHint|
                            QtCore.Qt.WindowTitleHint|
                            QtCore.Qt.WindowMaximizeButtonHint)
        self.setGeometry(0, 0, 800, 480)
        self.setWindowTitle('TEST PROCESSING')

        self.quit = QtGui.QPushButton('Close', self)
        self.quit.setGeometry(10, 10, 60, 35)

        test = QtGui.QPushButton('TEST 2', self)
        test.setGeometry(250, 220, 200, 100)

        self.connect(self.quit, QtCore.SIGNAL('clicked()'),self.reject)

        self.connect(test, QtCore.SIGNAL('clicked()'),self.nextWindow)

    def nextWindow(self):
        self.next_Window.show()
    def setNextWindow(self, nextWindow):
        self.next_Window = nextWindow

class Window_Test1(QtGui.QDialog):

    def __init__(self):
        QtGui.QWidget.__init__(self)
        self.next_Window = None

        self.setGeometry(0, 0, 800, 480)
        self.setWindowTitle('TEST PROCESSING' )

        test = QtGui.QPushButton('TEST', self)
        test.setGeometry(100,100,100,100)

        quit = QtGui.QPushButton('Close', self)
        quit.setGeometry(10, 10, 60, 35)

        self.connect(test, QtCore.SIGNAL('clicked()'),self.nextWindow)
        self.connect(quit, QtCore.SIGNAL('clicked()'), self.reject)

    def nextWindow(self):
        self.next_Window.show()
    def setNextWindow(self, nextWindow):
        self.next_Window = nextWindow

if __name__ == '__main__':

    app = QtGui.QApplication(sys.argv)
    Window1 = Window_Test1()
    Window2 = Window_Test2()
    Window3 = Window_Test3()
    Window1.setNextWindow(Window2)
    Window2.setNextWindow(Window3)
    Window3.setNextWindow(Window1)
    Window1.show()
    sys.exit(app.exec_())

Answer 2

您也可以执行此操作，只需将组件放在列表中，并在.map中检查它们的类型，穿上自定义道具，否则只需返回原始子代即可。

const allowedTypes = [ToggleOn, ToggleOff, ToggleButton]

return React.Children.map(props.children, child => {
  if (allowedTypes.includes(child.type)) {
    return React.cloneElement(child, {on, toggle})
  }
  return child
  })
}

反应化合物组分类型警告

2 个答案: