Question

想要渲染按钮基于json { “ActionType”：[{ “场”：“按钮”， “FieldText”：“否”， “FieldAction”：“this.getCellNumber（'no'）”， “样式”：”” }，{ “场”：“按钮”， “FieldText”：“否”， “FieldAction”：“this.getCellNumber（'yes'）”， “样式”：”” }] }

如何在渲染函数中循环它以获取视图中的按钮数

render(){
  return(

        <View style={this.styles.ButtonValContainer}>

        </View>
);

}

Answer 1

在反应过程中，您可以轻松收集一系列元素进行渲染。

const buttons = [
    {
      text: 'button one',
      action: () => console.log('pressed button one'),
    }, 
    {
      text: 'button two',
      action: () => console.log('pressed button two')            
    }
];

...

// react class definition

// ...
// assuming `Button` is a defined class in scope.

render() {
  const renderedButtons =  buttons.map(b => {
    return <Button key={b.text} text={b.text} onPress={b.action} />;
  });

  return (
    <View>
     {renderedButtons}
    </View>
  )
}

希望有所帮助。

Answer 2

您可以遍历列表并返回回调中的组件。唯一的要求是返回的组件具有key属性，React在重新渲染时会在内部使用该属性（以便它知道要删除/移位/更新的内容等）

render() {
  return(
    <Wrapper>
      {items.forEach(function(item) {
        return (
          <View style={this.styles.ButtonValContainer} key={'UNIQUE_KEY_HERE'}>
            ...
          </View>
        );
      })}
    </Wrapper>
  );
}

以下是一些信息：https://facebook.github.io/react/docs/multiple-components.html

在视图中呈现多个按钮以编程方式对原生进行反应

2 个答案: