什么是类应用程序中的道具

Question

有人可以解释什么是道具吗？
我总是读道具是我们的组件，但这没有意义，我们在这个道具上使用方法而不是将它们作为参数传递。

class App extends Component {
placeDeletedHandler = () => {
this.props.onDeletePlace();
};

。

Answer 1

您可以将 props 视为传递给类构造函数的一些参数(实际情况就是如此(。问题是这些道具是不可变的，所以它们就像类的只读属性。

Answer 2

Props 是属性，例如 HTML 标记中的属性。 当我们想将数据传递给组件时，我们可以使用 props。 假设您想将名称传递给子组件，那么您可以像这样传递，例如

<Component data={name}  />

在这个组件文件中，你可以像这样得到它，例如

class App extends Component {
componentDidMount() // or any other function,render,constructor 
{
let name=this.props.data
}
}

并且您无法更改接收组件中的 props 值 ** 如果您需要更多解释，请告诉我

Answer 3

我会尝试解释，但我使用 React，React-Native 只工作了 3 个月，所以它可能是错误/不完美的(尽管我的英语非常完美(。 当您必须将某些内容从父组件传递到他的子组件时，将使用 props。您可以传递状态、函数...

class ParentComponent extend React.Component {
constructor(props) {
super(props);
this.state = {
data: 'something'
};
}
render() {
return (
<ChildComponent
yourprop={this.state.data}
/>
);
}
}

class ChildComponent extend React.Component {
render() {
/*you can destructure your prop here*/
const {
yourprop;
} = this.props;
return() {
<Text>{yourprop}</Text>
}
}
}
//or with functional component
const ChildComponent = (props) => {
const {
yourprop
} = props
return (
<Text>{yourprop}</Text>
);
};

请注意，如果要处理子项中的父状态值，则必须另外传递一个函数。