Question

我们假设连续有10个<Text></Text>个组件。这些组件将通过循环遍历数组来创建：

...
const fontsize = 16
return (
  <View style={{flex: 1}}>
    {
      array.map((val, index, arr) => {
        return (
          <Text ref={'text' + index} style={{fontSize: fontsize}]}>{val}</Text>
        )
      })
    }
  </View>
)
...

现在我要使用<Text>

的引用更改'text5'组件的fontSize

我知道我可以使用this.refs.text5.props.style.fontSize获取/设置此组件的样式，但我如何更新虚拟DOM？

Answer 1

使用州：https://facebook.github.io/react-native/docs/state.html

调用this.setState将重新呈现具有更新状态的视图。

e.g。

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fontizes: [16, 127, 2, ...]
    };
  }

  setFontsize(size, index) {
    let current = this.state.fontsizes;
    current[index] = size;
    this.setState({ fontsizes: current });
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {
          array.map((val, index, arr) => {
            return (
              <Text ref={'text' + index} style={{fontSize: this.state.fontsizes[index]}]}>{val}</Text>
            )
          })
        }
      </View>
    )
  }
}

React-Native - 以编程方式更改组件的样式（无单击）

1 个答案: