Question

我有一个自定义反应组件menuItem

var MenuItem = React.createClass({
  render: function() {
    return (
      <TouchableOpacity
        onPress={this.props.targetPath}>
        <View style={styles.menuItem}>
          <Text>{this.props.txt}</Text>
        </View>
      </TouchableOpacity>
    );
  }
});

我这样使用：

<MenuItem txt='MyHome' targetPath={this.home} />

但是，我想按如下方式使用它：

<MenuItem targetPath={this.home}>MyHome</MenuItem>

所以它更贴近html标签。我如何实现这一目标？

即

Answer 1

将您的组件实施更改为此

var MenuItem = React.createClass({
  render: function() {
    return (
      <TouchableOpacity
        onPress={this.props.targetPath}>
        <View style={styles.menuItem}>
          <Text>{this.props.children}</Text>
        </View>
      </TouchableOpacity>
    );
  }
});

您在JSX标记之间放置的内容将以children prop。

的形式传递

访问自定义反应组件的内容

1 个答案: