javascript - 创建自定义组件

Question

我一直在尝试在 React-Native 中获得一个 UITableView 等效项。屏幕如下所示(正在进行中):

目前的代码相当原始:

class SettingsView extends Component {
  render() {
    return(
      <View style={styles.container}>
        //more View code

        //example of a cell
        <TouchableHighlight style={styles.tableViewCell}>
          <Text style={styles.cellLabel}>Log Out</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

它工作得很好，我一直在尝试为我的所有单元格创建一个附件 - 一个 > 指示器。在这样做的同时，我偶然发现了一种通过以下代码创建自定义组件的方法:

class TableViewCell extends Component {
  render() {
    return (
      <TouchableHighlight style={styles.tableViewCell}>
        <Text style={styles.cellLabel}>Log Out</Text>
      </TouchableHighlight>
    );
  }
}

接下来，我替换了最初的代码块，结果如下:

class SettingsView extends Component {
  render() {
    return(
      <View style={styles.container}>
        //more View code

        //example of a cell
        //Replaces the previous block of TouchableHighlight
        <TableViewCell/>
      </View>
    );
  }
}

哇。对于几乎没有任何 HTML 和 JavaScript 经验的原生 Swift 开发人员来说，这真是太棒了。我立即开始探索，试图找出如何使其可重复使用。目前，TableViewCell 已硬编码为包含文本“Log Out”。理想情况下，我希望能够提供文本作为构造函数的参数。这就是我被困住的地方。这是我到目前为止所尝试过的:

使用 getAttribute 来查看是否可以提取在声明 TableViewCell 标记时传入的属性。

//when declaring a cell on the screen's render
<TableViewCell titleText="About"/>

//tableViewCell component
render() {
  return(
    <TouchableHighlight ...>
      <Text>{this.getAttribute("titleText")}</Text>
    </TouchableHighlight>
  );
}

我无法获取对已声明为标记一部分的 titleText 的引用。有什么想法吗？

Answer 1

我可能是错的，但我很确定这就是您所需要的。您可以将属性传递给组件并以 this.props 形式接收它们:

// when declaring a cell on the screen's render
<TableViewCell titleText="About"/>

// tableViewCell component
render() {
  return(
    <TouchableHighlight ...>
      <Text>{this.props.titleText}</Text>
    </TouchableHighlight>
  );
}