如何設置動態支撐到組件中reactjs

Question

我有一個列表項組件，它看起來是這樣的：

import React, { Component } from 'react'; 
import './App.css'; 
// import $ from 'jquery'; 

class ListItem extends Component { 
    render() { 
     let message = ""; 
    return (
     <div className="item col-xs-4 col-lg-4"> 
      <div className="thumbnail"> 
       <img className="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div className="caption"> 
        <h4 className="group inner list-group-item-heading">Product title {title}</h4> 
        <p className="group inner list-group-item-text"> 
         {message} 
        </p> 
       </div> 
      </div> 
     </div>  
    ); 
    } 
} 

export default ListItem; 

正如你看到的我想動態設置標題和的listItem的消息。我如何使用下面的道具來設置標題和消息？

在這裏，我會重用PageContent.jsx這個組件：

<ListItem message="tester"></ListItem> 

我怎麼給標題和消息給它的組件動態設置呢？

Answer 1

首先值傳遞消息和標題在道具：

<ListItem message="hello" title='world'></ListItem> 

然後使用this.props.message和this.props.title列表項組件內部訪問這些值。

像這樣：

class ListItem extends Component { 
    render() { 

    console.log(this.props.message, this.props.title); 

    return (
     <div className="item col-xs-4 col-lg-4"> 
      <div className="thumbnail"> 
       .... 
         Product title {this.props.title}</h4> 
       .... 
         {this.props.message} 
       .... 
      </div> 
     </div>  
    ); 
    } 
} 

我會建議你閱讀react doc，因爲這是一個非常基本的組成部分。

注意：我認爲你使用jQuery的反應，這不是一個好主意，我們應該避免這種情況。