Question

我正在通过列出待办事项列表来学习React Naive。
我想将ToDo应用更改为具有彼此评论的评论列表。
第一次尝试正常工作：

但是，所有用户在第二次尝试后都发生了更改。

现在，父母可以使用{this.state.pick}和{this.state.key}将道具传递给孩子，但是如果父母的道具发生了变化，孩子也会发生变化。

有什么方法可以改变父道具而不改变子道具吗？

Comment.js：

export default class CommentIndex extends Component<{}> {

  constructor(props) {
    super(props);

    this.state = {
      head: [],
      list: [],
      pick: [],
    };
  }

  _onPress = (text) => {
    const list = [].concat(this.state.list);

    list.push({
      key: Date.now(),
      text: text,
      done: false,
    });

    this.setState({
      list,
    });
  }

  render() {
    const {
      head,
      list,
      pick,
    } = this.state;

    var data = [["User1", "User2", "User3"],];

    return (
      <View style={styles.container}>
        <View style={styles.dropdownHeader}>
        <View style={styles.dropdown}>
          <DropdownMenu
            style={{flex: 1}}
            bgColor={'white'}
            tintColor={'#666666'}
            activityTintColor={'green'}
            handler={(selection, row) => this.setState({head: data[selection][row]})}
            data={data}
          >
            <View style={styles.userHeader}>
              { this.state.head === 'User1' && <User1 /> }
              { this.state.head === 'User2' && <User2 /> }
              { this.state.head === 'User3' && <User3 /> }
            </View>
          </DropdownMenu>
        </View>
        </View>
      <Text>To Do</Text>
        <View style={styles.main}>
          <View style={styles.post}>
            <View style={styles.dropdown}>
              <View style={{height: 0}} />
              <DropdownMenu
                bgColor={'white'}
                tintColor={'#666666'}
                activityTintColor={'green'}
                handler={(selection,row) => this.setState({pick: data[selection][row]})}
                data={data}
              >
                <View style={styles.user}>
                  { this.state.pick === 'User1' && <User1_photo /> }
                  { this.state.pick === 'User2' && <User2_photo /> }
                  { this.state.pick === 'User3' && <User3_photo /> }
                </View>
              </DropdownMenu>
            </View>
            <View style={styles.postinput}>
              <CommentInput onPress={this._onPress} />
            </View>
          </View>
          <View style={styles.CommentListContainer}>
            <FlatList
              style={styles.CommentList}
              data={list}
              renderItem={({ item }) => <CommentItem {...item} head={this.state.head} pick={this.state.pick}/>}
            />
          </View>
        </View>
      </View>
    );
  }
}

评论输入：

export default class CommentInput extends Component {
    constructor(props) {
        super(props);

        this.ref = {};
    }

    _onPress = () => {
        this.props.onPress(this.ref._lastNativeText);
        this.ref.setNativeProps({ text: '' });
    }

    render() {
        const {
            onPress,
        } = this.props;

        return (
            <View style={styles.container}>
                <TextInput
                    style={styles.textInput}
                    ref={(ref) => { this.ref = ref; }}
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={this._onPress}
                >
                    <Text style={styles.buttonText}>追加</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Answer 1

您可以在子对象上实现shouldComponentUpdate方法。如果需要，这将阻止重新渲染（具有新属性）。

如何将父项的道具存储在子项中？

1 个答案: