ハードコーディングを避けるために、別のファイルを使って反応する小道具？

Question

私はReactを初めて利用しています。私のHomepageコンポーネントでは、私のPageHeader内で "Hello World"を小道具を使用してハードコーディングしないようにしたい。私は私のレンダリング機能の中で、私の小道具、タイトル、別のファイル、App.jsを宣言しようとしていますが、何も表示されていません。ハードコーディングを避けるために、Reactを効率的に使用して別々のファイルで小道具を使用するにはどうすればよいですか？これを行う最善の方法は何ですか？

マイApp.jsファイル：

class App extends Component { 

render() { 
    return ( 

     <div className="App"> 

      <Homepage title="Hello World" /> 

     </div> 

); 
    } 
} 

export default App; 

マイHomepage.jsファイル：

const Homepage = (props) => { 

return (

    <div> 

     <PageHeader> {props.title} </PageHeader> 

    </div> 
) 
} 

export default Homepage; 

また、私のファイルが正しくインポートされます。

注：React-BootstrapからPageHeaderをインポートしているので、下の回答をしようとすると重複宣言と表示されます。これを避けるためにコードを変更するにはどうすればよいですか？

Answer 1

子要素をexplcitlyに渡す必要があります。 {... props}をコンポーネントの属性として使用することができます/ reactのprops.childrenを使用して、タグ本体内で渡されたコンテンツを表示できます。

ここでは、あなたが求めたものを達成するための2つの方法を示します。子どもコンポーネントに小道具を渡す

：

const PageHeader = ReactBootstrap.PageHeader; 
 
const Homepage = props => { 
 
    return (
 
    <div> 
 
     <PageHeader> {props.title} </PageHeader> 
 
    </div> 
 
); 
 
}; 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <Homepage title="Hello World - 1" /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.4/react-bootstrap.min.js"></script> 
 

 
<div id="app"></div>