Question

我有一个listitem组件，如下所示：

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

首先在props中传递值消息和标题：

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

然后在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做出反应，这不是一个好主意，我们应该避免这种情况。

如何动态prop为reactjs中的组件

1 个答案: