对父母传递给孩子的道具做出反应

时间:2018-07-06 11:19:40

标签: javascript reactjs

我想在子组件中设置一个属性,以便在将该组件导入父组件时可以使用,但是我不确定该如何做,我尝试了很多指南,但无法应用它们。

这是我的孩子

import React, { Component } from 'react'

export default class Home extends Component {

render() {

let subHeading = "DIY everyday carry biodiesel 90's direct trade iPhone. Kogi tilde coloring book, meh knausgaard pitchfork chartreuse pop-up keffiyeh lo-fi stumptown deep v live-edge."

return (
  <div className="container">
    <h1 className="title" >{ this.props.heading }</h1>
    <h3 className="subtitle">{ subHeading } </h3>
  </div>
)
}
}

和父母

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Faq from './components/Faq/Faq';
import Home from './components/Home/Home';
import { Route } from 'react-router-dom';

class App extends Component {

 render() {
return (
  <div className="App">
    <Header heading='Ze header'/>

    <Route exact={true} path="/" component={Home} />
    <Route path="/faq" component={Faq} />

    <Footer />
  </div>
);
}
}

export default App;

所以我想将h1标题中的文本设置为导入标头时设置的文本。我很确定我需要向该子级添加一个构造函数,但不确定如何编写。

请帮助?

它与标记为重复项的项目略有不同,因为它是通过路由器传递道具的,而我正试图将其直接传递给组件

0 个答案:

没有答案