为组件ReactJs的其他文件导入一个props

Question

我有一个关于道具范围的问题。我会在我的App.js中使用2个道具调用组件(就在下面)，并在我的其他文件"PrimaryButton.js"中使用这些道具。

function App() {
return (
<div className="App">
<PrimaryBouton Type='primary' Title='Lorem Ipsum'/>   
</div>
);
}
export default App;

这是我的另一个文件:

import './PrimaryButton.css';
import React from 'react';
class PrimaryBouton extends React.Component {
render(props) {
return (
<button className={props.Type}>
<span>{props.Title}</span>
</button>
);
}
}
export default PrimaryBouton ;

我的目标是使用App.js上的props来定义我的按钮和他的span的css类。我真的不知道如何导入我的道具。在这个文件中，如果有人可以帮助我，谢谢!

Answer 1

要在您的例子中使用props，它看起来像这样:

import './PrimaryButton.css';
import React from 'react';
class PrimaryBouton extends React.Component {
render() {
const { title, type } = this.props;
return (
<button className={type}>
<span>{title}</span>
</button>
);
}
}
export default PrimaryBouton;

我建议将你的道具命名为小写而不是大写。在某些情况下，你最终会把props作为大写来传递，比如通过props传递一个组件，所以把它命名为大写通常意味着: