Javascript React子级中的预配置道具集将覆盖从父级传递的自定义道具

显示的是fontSize:20和颜色：“红色”道具，而不是从父组件设置的fontSize:12和颜色：“蓝色”，但fontWeight：“粗体”显示正确

我有一个可重用的React UI子组件，它从其父组件接收一些道具，如下所示

import React from "react";
import { Text, StyleSheet } from "react-native";

const BodyText = ( props ) => {
  return (
      <Text style={styles.bodyText} {...props} >{props.children}</Text>
  );
};
const styles = StyleSheet.create({
  bodyText: {
    fontSize: 20,
    color: 'red'
  },
});

export default BodyText;

从“React”导入React；
从“react native”导入{Text，StyleSheet}；
const BodyText=（道具）=>{
返回(
{props.children}
);
};
const styles=StyleSheet.create({
正文：{
尺寸：20，
颜色：“红色”
},
});
导出默认正文；

父组件如下所示

import React from "react";
import { StyleSheet } from "react-native";
import BodyText from './components/UI/BodyText'

const Parent = () => {
  return (
      <BodyText style={styles.text} >Hi There</BodyText>
  );
};
const styles = StyleSheet.create({
  text: {
    fontSize: 12,
    color: 'blue',
    fontWeight: 'bold'
  },
});

export default Parent;

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const BodyText = (props) => {
  const { style, children, ...rest } = props;   // Destructure props here...

  return (
    <Text style={[styles.bodyText, style]} {...rest}>
      {children}
    </Text>
  );
};
const styles = StyleSheet.create({
  bodyText: {
    fontSize: 20,
    color: 'red',
  },
});

export default BodyText;

从“React”导入React；
从“react native”导入{StyleSheet}；
从“./components/UI/BodyText”导入正文
常量父项=（）=>{
返回(
你好
);
};
const styles=StyleSheet.create({
正文：{
尺寸：12，
颜色：“蓝色”，
fontWeight:“粗体”
},
});
导出默认父对象；

---

有趣的是，当我在中玩时，它显示正确，但在本地设置中没有显示。

像这样实现您的

BodyText.js

import React from "react";
import { StyleSheet } from "react-native";
import BodyText from './components/UI/BodyText'

const Parent = () => {
  return (
      <BodyText style={styles.text} >Hi There</BodyText>
  );
};
const styles = StyleSheet.create({
  text: {
    fontSize: 12,
    color: 'blue',
    fontWeight: 'bold'
  },
});

export default Parent;

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const BodyText = (props) => {
  const { style, children, ...rest } = props;   // Destructure props here...

  return (
    <Text style={[styles.bodyText, style]} {...rest}>
      {children}
    </Text>
  );
};
const styles = StyleSheet.create({
  bodyText: {
    fontSize: 20,
    color: 'red',
  },
});

export default BodyText;

从“React”导入React；
从“react native”导入{Text，StyleSheet}；
const BodyText=（道具）=>{
const{style，children，…rest}=props；//此处解构props。。。
返回(
{儿童}
);
};
const styles=StyleSheet.create({
正文：{
尺寸：20，
颜色：“红色”，
},
});
导出默认正文；

---

您也可以使用默认道具：

从“React”导入React；
从“react native”导入{Text，StyleSheet}；
const BodyText=（道具）=>{
返回(
{props.children}
);
};
BodyText.defaultProps={
尺寸：20，
颜色：'红色'
}
导出默认正文；

在您可以将组件与新道具一起使用或不使用后：

你好

---

谢谢您的帮助。这是一个100%有效的代码，应该可以工作，但不幸的是，我仍然没有得到想要的输出。与以前没有变化。我在控制台上记录了props.style，奇怪的是，它最初是用道具渲染正确的对象，然后在最后一次渲染中，它渲染了一个空对象。谢谢你，是的，这应该可以工作，但在我的情况下没有。我控制台记录的道具，它在最后一次渲染中渲染一个空对象。有趣的是，它正在正确设置其他样式。你检查了我买的零食了吗provided@KartikeyVaish是的，我做了，它正在工作。正如我之前所说的，你的代码是有效的，它应该可以工作，我认为我的代码也应该可以工作。当我在本地系统中测试它时，什么都不起作用。有些奇怪的问题，我无法理解。