创建自定义组件

Question

我一直试图在UITableView中获得React-Native等效值。屏幕看起来像这样（正在进行中）：

目前的代码非常原始：

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>
  );
}