Question

我尝试从父级到子级函数获取openMenu的值，但是props.value在子级函数中为空，我不明白为什么。

function Child({ routes }, props) {

  return (

    <div>{props.value}</div>        /*This is empty*/
  )
}

function Parent() {
  const [isOpen, setOpen] = useState({
    isOpen: false
  });

  const handleClick = e => {
    e.preventDefault();
    setOpen(isOpen => !isOpen);

    if(isOpen === true) {
      const openMenu = 'open';
      return <Child value={openMenu}/>;      
    } 
    else {
      const openMenu = 'close';
      return <Child value={openMenu} />     
    }      

  };
}

我想获取openMenu的值（打开或关闭）给Child组件。

Answer 1

道具是function component中的第一个参数。

// Display an action button in admin order list header
add_action( 'manage_posts_extra_tablenav', 'admin_order_list_top_bar_button', 20, 1 );
function admin_order_list_top_bar_button( $which ) {
    global $pagenow, $typenow;

    if ( 'shop_order' === $typenow && 'edit.php' === $pagenow && 'top' === $which ) {
        ?>
        <div class="alignleft actions custom">
            <button type="submit" name="import_courier" style="height:32px;" class="button" value="yes"><?php
                echo __( 'Import Couriers', 'woocommerce' ); ?></button>
        </div>
        <?php
    }
}

// Trigger an action (or run some code) when the button is pressed
add_action( 'restrict_manage_posts', 'display_admin_shop_order_language_filter' );
function display_admin_shop_order_language_filter() {
    global $pagenow, $typenow;

    if ( 'shop_order' === $typenow && 'edit.php' === $pagenow &&
    isset($_GET['import_courier']) && $_GET['import_courier'] === 'yes' ) {

        ## -------- The code to be trigered -------- ##

        update_shipping_couriers_meta_field();

        ## -------------- End of code -------------- ##
    }
}

// Your function that will be triggered on button press
function update_shipping_couriers_meta_field() {
    $dir = __DIR__;
    $couriers = file( $dir . '/import-couriers.csv', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES );
    $count = count($couriers);
    $i = 1;

    do {
        if ( !empty( $couriers ) ) {
            foreach ( $couriers as $a ) {
                if ( !empty( $a ) ) {
                    $rows = explode(';', $a);

                    $id = $rows[0];
                    $id = int($id);
                    $couriers = $rows[1];

                    update_post_meta( $id, '_shipping_couriers', $couriers );
                }
                $i++;
            }
        }
    } 
    while ( $i <= $count );
}

如果您尝试将function Child(props) { return ( <div>{props.value}</div> ) }的{{1}}进行销毁，则可以使用 rest 模式（routes）来获取所有其他道具。

props

Answer 2

也许您应该在发送道具和破坏道具方面有一些见识，

packaged_results = [WebResult(single_result_json) for single_result_json in json_results.get("webPages", {}).get("value", [])]

您还可以发送多个道具，

// suppose props = { val1, val2, val3 }

const Parent = (props) => <Child {...props} />

// in such case you can destructure the values in the paranthesis itself,

const child = ({ val1, val2, val3 }) => {
 <div>
  <div>{val1 && val1}</div>
  <div>{val2 && val2}</div>
  <div>{val3 && val3}</div>
 <div>
}


// which is same as,

const child = (props) => {
 const { val1, val2, val3 } = props
 //rest of the code..
}

并在子级中将它们分解为

class Parent extends Component {
 // ..
function1 = () => {..}

function2 = () => {..}

 render () {

 //suppose this.props = { match, dispatch, list, ..}
 const value1 = ..
 const value2 = ..

  return <Child {...{ function1, function2, value1, value2}} {...this.props} />
}

现在您可以看到它有多方便，而且您不会再迷路了。注意：..（空白处用双点填充）

子组件props是空的，尽管它们是从父组件传递来的

2 个答案: