Question

有没有办法将 props 传递给类组件？

2021-10-29

1589

reactjs

我是 React 的新手。
我仍然不太明白如何像在函数中一样将 props 传递给类组件。
函数示例：

const SurveyFormReview = ({ onCancel, formValues, submitSurvey, history }) => {
    return (
        ...
        <button
            onClick={() => submitSurvey(formValues, history)}
            className="green btn-flat right white-text"
        >
        ...
    );
};

类组件示例：

class ImageUpload extends Component {
    render() {
        return (
            // I want to use props in here
        )
    }
}

Answer 1

使用 ImageUpload 组件时，只需使用您想要的任何属性：

<ImageUpload propA="someValue" propB={someVariable}/>

从 ImageUpload 组件中，只需调用 props 属性：

someFunction = () => {
    var propAValue = this.props.propA;
    var propBValue = this.props.propB;
}

就是这样！

Answer 2

例如

<ImageUpload propExample="property" />

在 ImageUpload 组件内部，你可以通过以下方式访问它：

this.props.propExample

Answer 3

您可以在 React 中的 Class 和 function 组件中将任何值作为 props 传递。阅读有关 props 的更多信息

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
};

ReactDOM.render(
    <Welcome name="Sara" />,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>