javascript - react native : filtering props?

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...

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

Answer 1

Transferring Props

Sometimes it's fragile and tedious to pass every property along. In that case you can use destructuring assignment with rest properties to extract a set of unknown properties. List out all the properties that you would like to consume, followed by ...other.

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

This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.

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')
);