Как передать реквизит от родителя ребенку ребенку ребенка?

Question

Я хочу передать реквизиты из App.js (родительский) в CommentItem.js (дочерний) в Button.js (дочерний дочерний), но реквизит пуст в Button, компоненте js (дочерний дочерний).

1. App.js (родительский) для CommentItem.js (дочерний)

Я выдвинул mainuser: this.state.head в FlatList, а реквизиты (mainuser) прошли мимо renderItem={({ item }) => <CommentItem {...item}

И, CommentItem.js (дочерний) получил mainuser по приведенному ниже коду.

const {
    head,
    text,
    created,
    mainuser,
    subuser,
  } = 

CommentItem.js (дочерний элемент) для Button.js (дочерний элемент дочернего элемента)

Я думал, что реквизит был перенесен на Button, и Баттон (дочерний элемент дочернего элемента) получил реквизит с помощью кода ниже.

const {
      mainuser,
    } = this.props;

Тем не менее, id реквизита пуст в Button.js (child of child).

# Есть ли проблемы с моим кодом?Не могли бы вы дать несколько советов, пожалуйста?

---

App.js (родитель)

export default class App extends Component<{}> {

  constructor(props) {
    super(props);

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

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

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

    this.setState({
      list,
    });
  }

  render() {
    const {
      head,
      list,
    } = 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}
          >
          </DropdownMenu>
        </View>
        </View>
      <Text>To Do</Text>
            <View style={styles.postinput}>
              <CommentInput onPress={this._onPress} />
            </View>
          </View>
          <View style={styles.CommentListContainer}>
            <FlatList
              /*inverted*/
              style={styles.CommentList}
              data={list}
              renderItem={({ item }) => <CommentItem {...item} /> }
            />
          </View>
    );
  }
}

CommentItem.js (дочерний)

const CommentItem = (props) => {
  const {
    head,
    text,
    created,
    mainuser,
    subuser,
  } = props;


  return (
    <View style={styles.container}>
      <View style={styles.left}>
        <Text style={styles.text}>{text}</Text>
      </View>
      <View style={styles.function}>
        <Button {...mainuser} />
      </View>
    </View>
  );
}

Button.js (ребенок ребенка)

export default class ApplauseButton extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }

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

    return (
      <View style={styles.container}>
        <Text>{mainuser}</Text>
      </View>
    );
  }
}

Answer 1

в соответствии с вашим кодом, кажется, что основным пользователем является массив,

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

....
list.push({
      key: Date.now(),
      text: text,
      done: false,
      mainuser: this.state.head,// main user should be array
});

, поэтому вам нужно дать имя пропила также в <Button />

, как это

<Button mainuser={mainuser} />

Answer 2

Если вы хотите получить доступ к mainuser в качестве реквизита, то вам нужно передать его как <Button mainuser={mainuser} />.

. Как есть, вы распространяете содержимоеmainuser.