Question

我创建了一个基本组件，例如：

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.title && <Text style={styles.text}>{props.title}</Text>}
    {props.icon && <Icon name={props.icon} />}
  </TouchableOpacity>
);

然后我可以用<Component title="Home" icon="home" />来调用它。

问题是将{...props}传递给TouchableOpacity会产生错误，因为它无法正确识别标题或图标。例如： JSON value 'Home' of type NSString cannot be converted to...

有没有办法过滤道具，以便我只传递有效的TouchableOpacity？

Answer 1

Transferring Props

有时通过每一处房产都是脆弱而乏味的。在这种情况下，您可以使用具有rest属性的解构赋值来提取一组未知属性。列出您要使用的所有属性，然后是......其他。

var { checked, ...other } = props;

这可以确保您传递所有道具，除了您所拥有的道具消耗自己。

function FancyCheckbox(props) {
  var { checked, ...other } = props;
  var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
  // `other` contains { onClick: console.log } but not the checked property
  return (
    <div {...other} className={fancyClass} />
  );
}
ReactDOM.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

Answer 2

与Paul Mcloughlin一样，我建议使用object destructuring和rest parameter。您可以直接在函数参数中构造道具对象，如下所示：

d3.timeFormatDefaultLocale(format);

这会从您的道具对象中提取({title, icon, ...remainingProps}) => (...)和title道具，并将其余道具传递为icon。

您的完整组件将是：

remainingProps

React Native：过滤道具？

2 个答案: