Question

我想将样式对象从父级发送到子组件。 Parent.js：

const styles = theme => ({

  field: {
    flexGrow: 1,
    position: 'relative',
    zIndex: 1,
  },
});

class Parent extends React.Component {
 render(){
  const {classes } = this.props
  return (
   <div>
    <Child className={classes.field} />
   </div>
  )
}
}

Child.js：

const styles = theme => ({

  container: {
    flexGrow: 1,
    position: 'relative',
    zIndex: 2,
  },
});

class Child extends React.Component {
 render(){
  const {classes} = this.props
  return (
   <div>
    <Child className={classes.field} />
   </div>
  )
}
}

这将返回Child组件的对象类，其中不包含Parent组件中包含的样式字段。是否有任何建议将样式从Parent发送给Child？

Answer 1

您创建了const.styles，但是您正在调用{classes.field}

尝试将styles更改为classes或：

const { styles } = this.props

通过道具发送给孩子：

 <Child className={styles.field} />

然后

class Child extends React.Component {
 render(){
  const {styles} = this.props
  return (
   <div>
    <Child className={styles.field} />
   </div>
  )
}

我认为

和className属性不是最好的选择

Answer 2

您可以尝试这样的事情： -

// Parent component 
class Parent extends React.Component {
 render(){
  return (
   <View>
    <Child customStyle={styles.childStyle} />
   </View>
  )
}
}

const styles = StyleSheet.create({
 childStyle: {
   color: "red"
 }
});

// Child component

class Child extends React.Component {
  render () {
    return (    
    <View>
        <Text style={[this.props.customStyle, styles.text]}></Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 14
  }
});

如何将样式从父组件发送到子组件？

2 个答案: