简单易懂的React魔法(05):什么是 React Props?

当你使用react组件时你可以给它输入数据。这些数据被称为props。它们是只读的，声明了组件最基础的状态。在JSX中，props就像HTML属性。为了证明这一点，我们来修改我们的应用以至于Detail组件可以从别的地方接收数据。
修改index.js 包含以下代码:
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Detail from './pages/Detail';

ReactDOM.render(
    ,
    document.getElementById('app')
);

注意新的 message="This is coming from props!"给Detail传入了参数。在Detail.js 我们需要接受这个参数 message取代原来手写的值：

src/pages/Detail.js

import React from 'react';

class Detail extends React.Component {
    render() {
        return 
{this.props.message}
;
    }
}

export default Detail;

注意我直接将this.props.message写在大括号里，这样表示JSX里面的是js代码而不是字符串。当应用被编译时这部分会当作代码执行，以便我们不需要拼接字符串。回到浏览器，屏幕上的字符串应该会自动更新。

在我们继续之前，我想进一步说明props不是严格只读的，你非要赋值也可以。不过最好还是别这么做，你应该确保props对子组件（Detail.js）是只读的，只在创建这些props的组件（index.js）里改变他们。也就是说，如果你创建了一个组件，它接收了props，你可以改变这些props，但是你不应该去改变这个props。