6. Props

Reacti komponendile saab saata väärtusi, mis võimaldavad kasutada komponenti erinevate väärtustega. Neid edastatavaid väärtusi nimetatakse propsideks. Props on staatiline, selle väärtust ei muudeta. Näide sellest kuidas edastatakse propse:

index.js

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

import Detail from './pages/Detail';

ReactDOM.render(
    <Detail message="See tuleb Propside kaudu." />,
    document.getElementById('app')
);

pages/Detail.js

import React from 'react';

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

export default Detail;

Kogu eelnev kood kutsutakse välja traditsioonilisest index.html failist:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Reacti äpp</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
</body>
</html>

Last updated