第05节、React组件：props和render成员_var props render-优快云博客

本文详细介绍了React中的Props概念及其使用方式，Props是组件间传递数据的重要手段，不可在组件内部修改，通常用于传递只读属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

props是组件固有属性的集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的。属性的初识值通常由React.createElement函数或者JSX中标签的属性值进行传递，并合并到组件实例对象的this.props中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习React</title>
</head>
<body>
    <div id="reactContainer"></div>

    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/babel">
        var TextBoxComponent = React.createClass({
            render:function () {
                return <div>这里取得的props值是：{this.props.myval}</div>;
            }
        });

        ReactDOM.render(
            <TextBoxComponent myval="propsDemo"/>,
            document.getElementById('reactContainer')
        );

    </script>
</body>
</html>

我们不应该修改props中的值。事实上，如果要在组件外更改也是一个很麻烦的事，需要找到组件实例，这没有必要。在设计组件时，就要想好组件哪些使用state，哪些使用props集合，哪些使用state集合。通常固定的组件内只读的、应由父组件传递进来的属性适合放在props集合中，如组件的类名、颜色、字体、事件响应回调函数等。